/* =====================================================================
   marca.css — Identidad de la Fundación Musaat (Condensaciones fases 07)
   Se carga después de styles.css. Solo aspecto: colores, botones,
   cabecera y tablas. No cambia la estructura ni el cálculo.
   Tokens tomados de la versión adaptada por la Fundación.
   ===================================================================== */
:root {
    --verde: #124A47; --verde-medio: #2A7671; --magenta: #CD0B59; --magenta-oscuro: #A70848;
    --berenjena: #7E3156; --texto: #243332; --texto-2: #4A5A59; --texto-3: #5B6A69;
    --fondo: #F2F2F2; --linea: #DCE5E3; --linea-fuerte: #7E8E8C; --pista: #E6EEEC;
    --radio: 12px; --radio-sm: 8px;
}
* { font-family: "Segoe UI", Arial, "Helvetica Neue", Helvetica, sans-serif; }
body { background: var(--fondo); color: var(--texto); }
a { color: var(--verde); }

/* ---------- Cabecera ---------- */
.m-cabecera {
    display: flex; align-items: center; gap: 22px; background: #fff;
    margin: -10px -10px 14px; padding: 14px 24px; border-bottom: 3px solid var(--magenta);
}
.m-logo { height: 52px; width: auto; flex: none; }
.m-cab-texto { border-left: 1px solid var(--linea); padding-left: 22px; }
.m-cab-texto h1 {
    margin: 0; font-size: clamp(20px, 2.2vw, 28px); color: var(--magenta); font-weight: 800;
    text-align: left; letter-spacing: -.3px;
}
.m-cab-texto h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--verde); }
.m-cab-texto p { margin: 6px 0 0; color: var(--texto-2); font-size: 14px; }
.m-cab-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.m-cab-acciones button {
    border-radius: 999px !important; background: #fff !important; border: 1px solid var(--verde) !important;
    color: var(--verde) !important; font-weight: 700 !important; font-size: 14px !important;
    padding: 8px 16px !important; box-shadow: none !important; min-height: 40px; margin: 0 !important;
}
.m-cab-acciones button:hover { background: var(--pista) !important; }

/* ---------- Paneles, títulos y tablas ---------- */
.panel, .chart-panel {
    border-radius: var(--radio); border: 1px solid var(--linea);
    box-shadow: 0 1px 2px rgba(18,74,71,.04), 0 6px 18px rgba(18,74,71,.05);
}
h2 { color: var(--verde); border-bottom: 2px solid var(--linea); font-weight: 800; }
.panel > h2, .chart-panel > h2 { display: flex; align-items: center; gap: 8px; }
.panel > h2::before, .chart-panel > h2::before {
    content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px;
    background: var(--magenta); box-shadow: 0 0 0 3px rgba(205,11,89,.12);
}
h3 { color: var(--verde); }
th { background: var(--verde) !important; color: #fff !important; font-weight: 700; }
th, td { border-color: var(--linea); }
tr:nth-child(even) { background: #F7FAF9; }
.results-box p { background: #F7FAF9; border-color: var(--linea); border-radius: var(--radio-sm); }

/* ---------- Campos ---------- */
select, input { border-color: var(--linea-fuerte); color: var(--texto); }
input:focus, select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(18,74,71,.18); }
:focus-visible { outline: 3px solid var(--magenta) !important; outline-offset: 2px; }

/* ---------- Botones ----------
   1) Contorno verde (por defecto y botones de acción).
   2) Acciones principales rellenas en magenta.
   3) Acción que borra: contorno magenta oscuro.                         */
button { border-radius: 999px; border: 1px solid var(--verde); background: #fff; color: var(--verde); font-weight: 700; box-shadow: none; }
button:hover { background: var(--pista); filter: none; box-shadow: none; }

button[data-contorno], button[id="btn-default-he"] {
    background-color: #fff !important; border: 1px solid var(--verde) !important; color: var(--verde) !important;
    border-radius: 999px !important; font-weight: 700 !important; text-shadow: none !important; box-shadow: none !important;
}
button[data-contorno]:hover, button[id="btn-default-he"]:hover { background-color: var(--pista) !important; filter: none; }

#btn-add-layer, #mens-add, #btn-save-cerramiento, #btn-apply-custom-loc,
#btn-db-add, #btn-marcos-add, #btn-vidrios-add, .btn-principal, .splash-btn-enter {
    background-color: var(--magenta) !important; border: 1px solid var(--magenta) !important;
    color: #fff !important; border-radius: 999px !important; font-weight: 700 !important;
}
#btn-add-layer:hover, #mens-add:hover, #btn-save-cerramiento:hover, #btn-apply-custom-loc:hover,
#btn-db-add:hover, #btn-marcos-add:hover, #btn-vidrios-add:hover, .btn-principal:hover, .splash-btn-enter:hover {
    background-color: var(--magenta-oscuro) !important; border-color: var(--magenta-oscuro) !important;
}

#btn-cr-load-csv.btn-peligro { color: var(--magenta-oscuro) !important; border-color: var(--magenta-oscuro) !important; }
#btn-cr-load-csv.btn-peligro:hover { background-color: #FFF2F7 !important; }

/* Botones de la tabla de capas (subir, bajar, editar, eliminar) */
#layers-table button { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* Botones de solo icono (subir, bajar, editar, eliminar) */
button.m-icono { color: var(--verde) !important; font-weight: 700; font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif !important; }
button.m-icono-borrar { color: var(--magenta-oscuro) !important; }
button.m-icono:hover { background: var(--pista) !important; border-radius: 4px; }

/* Iconos de línea que sustituyen a los emojis */
.m-svg { width: 1.15em; height: 1.15em; vertical-align: -0.2em; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-svg-casa, .m-svg-documento, .m-svg-guardar, .m-svg-info, .m-svg-carpeta, .m-svg-recargar { color: var(--verde); }
.m-svg-ok { color: var(--verde-medio); }
.m-svg-aviso, .m-svg-error { color: var(--magenta-oscuro); }
#modal-glaser-dashboard .m-svg, #modal-psicrometrico [style*="1fr 410px"] > div:first-child .m-svg { color: inherit; }

/* ---------- Ventanas ---------- */
.modal > div:not([id^="modal"]), .modal .modal-content { border-radius: var(--radio) !important; }
#modal-app-alert .modal-content { border-color: var(--linea); }
.splash-titlebar { background: var(--pista); }
.splash-logo-img { max-width: 300px; }
.splash-close-btn:hover { background: var(--magenta-oscuro); }
.modal [tabindex="-1"]:focus, #modal-splash [tabindex="-1"]:focus { outline: none !important; }

/* Los gráficos no fuerzan el ancho de la rejilla */
.top-grid > *, .bottom-grid > * { min-width: 0; }
.chart-panel canvas { max-width: 100%; }

@media print { .m-cab-acciones { display: none; } }
#modal-mensual #mens-panel button.m-icono.m-icono-borrar { color: var(--magenta-oscuro) !important; }
#modal-splash .splash-window { border-color: var(--linea); }
.splash-titlebar { border-bottom-color: var(--linea); }

/* Botón «Volver» (sustituye a la casita) */
.m-btn-volver {
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--magenta) !important; color: #fff !important; border: 1px solid var(--magenta) !important;
    border-radius: 999px !important; font-size: 0.86rem !important; font-weight: 700 !important;
    line-height: 1.2 !important; padding: 7px 18px !important; min-height: 34px; cursor: pointer;
    user-select: none; white-space: nowrap;
}
.m-btn-volver:hover { background: var(--magenta-oscuro) !important; border-color: var(--magenta-oscuro) !important; }

/* Condiciones exteriores: las fija la localidad, no se editan */
#temp-ext[readonly], #hr-ext[readonly] { background: var(--pista); color: var(--texto-2); cursor: not-allowed; }

/* CND-057: con una ventana abierta, la página de fondo no se desplaza
   (ventanas.js pone la clase). scrollbar-gutter evita el salto al quitar la barra. */
html { scrollbar-gutter: stable; }
html.hay-ventana, html.hay-ventana body { overflow: hidden !important; }
.modal { overscroll-behavior: contain; }

/* CND-028: pestañas del ábaco sobre gris claro (4,34:1 → 7:1) */
[id^="tab-psicro-btn-"][style*="5b6a69" i] { color: #3F4A49 !important; }
/* CND-049: tamaño mínimo de 24 px (WCAG 2.2, 2.5.8) */
#carp-c-phi, #carp-c-ti { min-height: 24px; box-sizing: border-box; }
/* CND-050: «reducir movimiento» del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}