/* =====================================================================
   movil.css — Adaptación a teléfono y tableta (Condensaciones fases 09)
   Solo presentación. En escritorio (más de 1180 px) no cambia nada.
   - Tableta (761–1180 px): secciones 1 y 2 en dos columnas; gráficos debajo.
   - Teléfono (hasta 760 px, o en horizontal con poca altura): una sola
     columna (1. Condiciones → 2. Cerramiento y resultados → gráficos),
     barra fija inferior con los demás cálculos y ventanas a pantalla
     completa.
   ===================================================================== */

/* La barra inferior y su hoja solo existen en teléfono */
#barra-movil, #hoja-movil, #velo-movil, #lista-movil, button.sel-movil { display: none; }

/* ---------------- TABLETA ---------------- */
@media screen and (max-width: 1180px) {
    .top-grid { grid-template-columns: 300px minmax(0, 1fr) !important; }
    .top-grid > div:last-child { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 15px; }
    .top-grid > div:last-child > .chart-panel { height: 420px !important; min-height: 0 !important; }
    .bottom-grid { grid-template-columns: 1fr 1fr !important; }
    .top-grid > *, .bottom-grid > * { min-width: 0; }
}

/* ---------------- TELÉFONO ---------------- */
@media screen and (max-width: 760px), screen and (max-height: 500px) and (max-width: 1100px) {
    html, body { overflow-x: hidden; }
    body { padding: 0 0 calc(66px + env(safe-area-inset-bottom)) 0 !important; }
    .container { padding: 0 8px 10px !important; max-width: 100%; }

    /* Cabecera compacta */
    .m-cabecera { flex-wrap: wrap; gap: 8px 12px !important; margin: 0 -8px 10px !important; padding: 10px 12px !important; }
    .m-logo { height: 34px !important; }
    .m-cab-texto { border-left: 0 !important; padding-left: 0 !important; flex: 1 1 180px; }
    .m-cab-texto h1 { font-size: 1.1rem !important; }
    .m-cab-texto h1::after { display: none; }
    .m-cab-texto p { font-size: 0.75rem !important; margin-top: 2px !important; }
    .m-cab-acciones { margin-left: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px !important; }
    .m-cab-acciones button { min-height: 38px !important; padding: 6px 8px !important; font-size: 0.8rem !important; justify-content: center; }

    /* Una sola columna, en el orden 1 → 2 → gráficos */
    .top-grid, .bottom-grid { display: block !important; }
    .top-grid > *, .bottom-grid > * { margin-bottom: 12px; min-width: 0; }
    .top-grid > div:last-child { display: block !important; }
    .top-grid > div:last-child > .chart-panel { height: 400px !important; min-height: 0 !important; margin-bottom: 12px; }
    .top-grid > div:last-child > .chart-panel:last-child { height: 340px !important; }
    .bottom-grid .chart-panel { height: 360px !important; min-height: 0 !important; }
    .panel, .chart-panel { padding: 12px !important; }
    .panel > h2, .chart-panel > h2 { font-size: 1rem !important; }

    /* Campos: 16 px para que el teléfono no amplíe la página al escribir */
    select, input:not([type=checkbox]):not([type=radio]), textarea { font-size: 16px !important; min-height: 40px; }
    input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
    button { min-height: 40px; }

    /* Sección 2: familia, material y espesor en vertical */
    .top-grid > section.panel:nth-of-type(2) > .form-group:first-of-type { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; align-items: end !important; }
    .top-grid > section.panel:nth-of-type(2) > .form-group:first-of-type > div:nth-child(1),
    .top-grid > section.panel:nth-of-type(2) > .form-group:first-of-type > div:nth-child(2) { grid-column: 1 / -1; }
    #family-select, #material-select { max-width: none !important; width: 100% !important; }
    #material-thickness { width: 100% !important; }
    #btn-add-layer { height: 40px !important; width: 100%; }
    .top-grid > section.panel:nth-of-type(2) > .form-group:first-of-type > div[style*="margin-left: auto"] { grid-column: 1 / -1; margin-left: 0 !important; }
    #btn-edit-db { width: 100%; height: 40px !important; }
    /* Cerramiento estudiado y guardar/cargar */
    .top-grid > section.panel:nth-of-type(2) > div[style*="gap: 20px"] { flex-wrap: wrap; gap: 8px 16px !important; }
    .top-grid > section.panel:nth-of-type(2) > .form-group:nth-of-type(2) { flex-wrap: wrap; }
    #cerramiento-name { flex: 1 1 100% !important; }
    #btn-save-cerramiento, #btn-load-db-cerramiento { flex: 1 1 40%; height: 40px !important; }
    #select-saved-cerramientos { flex: 1 1 100%; max-width: none !important; height: 40px !important; }

    /* Tabla de capas: se desplaza en horizontal dentro de su recuadro */
    .layers-container { overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 0 !important; }
    #layers-table { min-width: 520px; }
    #layers-table td, #layers-table th { padding: 6px 4px; }
    #layers-table button { min-width: 32px !important; min-height: 32px !important; }

    /* Resultados en una columna */
    .results-box { grid-template-columns: 1fr !important; gap: 8px !important; }
    .results-box > div { grid-column: auto !important; }
    /* Los botones de otros cálculos pasan a la barra inferior */
    .results-actions, .results-box div:has(> #btn-analisis-mensual) { display: none !important; }

    /* Sección 1: condiciones de cálculo */
    #temp-int, #hr-int, #temp-ext, #hr-ext { width: 64px !important; }
    #val-rsi, #val-rse { width: 60px !important; }

    /* Gráficos de abajo: el selector de grados día en una línea */
    .bottom-grid .chart-panel > .form-group { flex-wrap: wrap; }

    /* -------- Barra fija inferior -------- */
    #barra-movil {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2900;
        background: #fff; border-top: 1px solid var(--linea, #DCE5E3);
        box-shadow: 0 -2px 10px rgba(18, 74, 71, 0.10);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 2px; justify-content: space-around;
    }
    #barra-movil button {
        flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 4px 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
        border-radius: 10px !important; color: var(--verde, #124A47) !important; font-size: 0.66rem !important; font-weight: 700; line-height: 1.1;
    }
    #barra-movil button:active { background: var(--pista, #E6EEEC) !important; }
    #barra-movil svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #barra-movil span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    #velo-movil { position: fixed; inset: 0; z-index: 2950; background: rgba(0, 0, 0, 0.35); }
    #hoja-movil {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2960; background: #fff;
        border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    }
    html.hoja-abierta #velo-movil, html.hoja-abierta #hoja-movil { display: block; }
    #hoja-movil .asa { width: 42px; height: 5px; border-radius: 3px; background: #C9D9D6; margin: 0 auto 10px; }
    #hoja-movil h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--verde, #124A47); }
    #hoja-movil .lista { display: grid; grid-template-columns: 1fr; gap: 8px; }
    #hoja-movil .lista button {
        display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: left;
        min-height: 50px; padding: 8px 14px !important; font-size: 0.95rem !important; border-radius: 12px !important;
        background: #fff !important; border: 1px solid var(--linea, #DCE5E3) !important; color: var(--verde, #124A47) !important;
    }
    #hoja-movil .lista svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* -------- Listas propias (Localidad, Familia, Material, Cerramientos) -------- */
    #climate-zone, #family-select, #material-select, #select-saved-cerramientos { display: none !important; }
    button.sel-movil {
        display: flex; align-items: center; width: 100%; min-height: 42px; padding: 8px 34px 8px 12px !important;
        border: 1px solid var(--linea-fuerte, #7E8E8C) !important; border-radius: 8px !important; background: #fff !important;
        color: var(--texto, #243332) !important; font-size: 15px !important; font-weight: 400 !important; text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
        background-image: linear-gradient(45deg, transparent 50%, #4A5A59 50%), linear-gradient(135deg, #4A5A59 50%, transparent 50%) !important;
        background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important;
    }
    button.sel-movil[style*="display: none"] { display: none !important; }
    button.sel-movil:disabled { opacity: 0.55; }
    html.lista-abierta #velo-movil { display: block; }
    #lista-movil {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2970; background: #fff; max-height: 82vh;
        border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); flex-direction: column;
    }
    html.lista-abierta #lista-movil { display: flex; }
    #lista-movil .asa { width: 42px; height: 5px; border-radius: 3px; background: #C9D9D6; margin: 0 auto 6px; flex: none; }
    #lista-movil .cab { display: flex; align-items: center; justify-content: space-between; flex: none; }
    #lista-movil h3 { margin: 0; font-size: 0.95rem; color: var(--verde, #124A47); }
    #lista-movil .cerrar { border: 0 !important; background: none !important; font-size: 1.5rem !important; color: #5B6A69 !important; min-height: 36px; padding: 0 6px !important; }
    #lista-movil .buscar { flex: none; margin: 6px 0 8px; width: 100%; font-size: 16px !important; padding: 8px 10px; border-radius: 8px; }
    #lista-movil .opciones { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
    #lista-movil .opciones button {
        display: block; width: 100%; text-align: left; min-height: 40px; padding: 8px 12px !important; flex: none;
        border: 0 !important; border-bottom: 1px solid #EEF2F1 !important; border-radius: 6px !important; background: #fff !important;
        color: var(--texto, #243332) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.3; white-space: normal;
    }
    #lista-movil .opciones button.marcada { background: var(--pista, #E6EEEC) !important; color: var(--verde, #124A47) !important; font-weight: 700 !important; }
    #lista-movil .opciones button:disabled { color: #9aa7a5 !important; }
    #lista-movil .vacio { padding: 14px; color: #5B6A69; font-size: 14px; }

    /* -------- Ventanas a pantalla completa -------- */
    .modal { padding: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; align-items: flex-start !important; }
    .modal > div:not([id^="modal"]), .modal .modal-content, #modal-splash .splash-window {
        width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
        min-height: 100%; max-height: none !important; height: auto !important; border-radius: 0 !important;
        overflow: visible !important; padding: 12px !important; box-sizing: border-box;
    }
    .modal div, .modal fieldset, .modal section, .modal label, .modal form { max-width: 100% !important; box-sizing: border-box; }
    .modal [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .modal [style*="display: flex"]:not([style*="column"]), .modal [style*="display:flex"]:not([style*="column"]) { flex-wrap: wrap; }
    .modal [style*="display: flex"]:not([style*="column"]) > [style*="flex: 1"], .modal [style*="display:flex"]:not([style*="column"]) > [style*="flex:1"] { flex-basis: 100% !important; min-width: 0 !important; }
    .modal [style*="flex-direction: column"], .modal [style*="flex-direction:column"] { flex-wrap: nowrap !important; }
    .modal [style*="min-width"] { min-width: 0 !important; }
    .modal fieldset { min-width: 0 !important; min-inline-size: 0 !important; }
    .modal [style*="width:"][style*="px"]:not(input):not(select):not(button):not(canvas):not(span):not(img) { width: auto !important; }
    .modal [style*="writing-mode"] { writing-mode: horizontal-tb !important; transform: none !important; height: auto !important; width: auto !important; }
    .modal table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .modal table th { white-space: nowrap; }
    .modal img { max-width: 100% !important; height: auto; }
    .modal h1, .modal h2, .modal h3 { white-space: normal !important; }
    .modal input[style*="width"], .modal select[style*="width"] { max-width: 100%; }
    /* Gráficos de las ventanas: Chart.js necesita un contenedor con altura */
    .modal div:has(> canvas) { height: 320px !important; min-height: 0 !important; max-height: 320px !important; position: relative !important; width: 100% !important; flex: none !important; }
    .modal canvas { max-width: 100%; }
    /* Ábacos: más altos */
    .modal div:has(> #modalPsychroCanvas) { height: 440px !important; max-height: 440px !important; }
    .modal div:has(> #crChartAbaco) { height: 420px !important; max-height: 420px !important; }
    .bottom-grid .chart-panel:first-child { height: 420px !important; }
    /* Contenedores con altura fija en escritorio (p. ej. la fila de gráficos de Condiciones reales) */
    .modal [style*="height: 700px"]:not(:has(> canvas)), .modal [style*="min-height: 700px"]:not(:has(> canvas)) { height: auto !important; min-height: 0 !important; }
    .modal div:has(> #crChartSeccion) { height: 420px !important; max-height: 420px !important; }
    /* Botón de cierre siempre visible arriba */
    .modal .close, .modal [onclick*="close"][style*="position: absolute"], .modal [onclick*="Close"][style*="position: absolute"] { position: sticky !important; top: 0; float: right; z-index: 5; }
    #modal-splash { align-items: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    .splash-body { padding: 16px !important; }
    /* La barra inferior no tapa las ventanas */
    html.modal-abierta #barra-movil { display: none; }
    html.modal-abierta body { padding-bottom: 0 !important; }
}

/* Teléfono en horizontal: barra más baja */
@media screen and (max-height: 500px) and (max-width: 1100px) {
    #barra-movil button { min-height: 42px; flex-direction: row; gap: 6px; font-size: 0.72rem !important; }
    #barra-movil svg { width: 18px; height: 18px; }
    body { padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important; }
    .m-cab-acciones { width: auto !important; display: flex !important; margin-left: auto !important; }
    .m-cab-texto p { display: none; }
}

@media print { #barra-movil, #hoja-movil, #velo-movil { display: none !important; } }

/* CND-049: casillas de al menos 24 × 24 px en el móvil */
@media screen and (max-width: 760px), screen and (max-height: 500px) and (max-width: 1100px) {
  input[type="checkbox"], input[type="radio"] { width: 24px !important; height: 24px !important; min-width: 24px; }
}