/* Imagen corporativa de SkyFerret (marca/GUIA_MARCA.md): azul noche, azul cielo y arena.
   El color de la compañía activa solo aparece en su distintivo. */
:root {
  --app: #13294B;        /* azul noche */
  --app-claro: #EAF3FB;  /* cielo muy claro */
  --cielo: #2F8FD8;      /* azul cielo */
  --arena: #EADCC6;      /* arena */
  --fondo: #F4F6F9;
  --panel: #ffffff;
  --texto: #1f2933;
  --suave: #5f6b7a;
  --borde: #d9dee5;
  --ok: #1e8e3e;
  --ok-fondo: #e6f4ea;
  --rev: #b06000;
  --rev-fondo: #fef3e0;
  --mal: #c5221f;
  --mal-fondo: #fce8e6;
  --pend: #5f6b7a;
  --pend-fondo: #eef0f3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
       color: var(--texto); background: var(--fondo); }
header { background: var(--app); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
         padding: 6px 24px; min-height: 56px; box-sizing: border-box; }
header .marca { display: flex; align-items: center; }
header .marca img { height: 40px; display: block; }
header nav { display: flex; flex-wrap: wrap; gap: 2px 2px; flex: 1 1 480px; }
header nav a { color: #fff; text-decoration: none; white-space: nowrap; padding: 8px 11px; border-radius: 6px; opacity: .85; }
header nav a:hover { background: rgba(255,255,255,.1); opacity: 1; }
header nav a.activa { background: rgba(255,255,255,.18); opacity: 1; }
.espacio { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--texto);
           padding: 4px 12px 4px 4px; border-radius: 6px; border-left: 6px solid var(--color-esp); }
.espacio img { height: 30px; }
.espacio span { font-size: 13px; font-weight: 600; }
main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
p.ayuda { color: var(--suave); margin: 0 0 20px; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.zona { border: 2px dashed var(--borde); border-radius: 10px; padding: 34px; text-align: center; color: var(--suave);
        background: var(--panel); cursor: pointer; transition: .15s; }
.zona.encima { border-color: var(--app); background: var(--app-claro); color: var(--app); }
.zona strong { color: var(--texto); font-size: 16px; display: block; margin-bottom: 4px; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modo { border: 1.5px solid var(--borde); border-radius: 10px; padding: 14px 16px; cursor: pointer; background: var(--panel); }
.modo input { margin-right: 8px; }
.modo b { font-size: 15px; }
.modo p { margin: 4px 0 0 24px; color: var(--suave); font-size: 13.5px; }
.modo:has(input:checked) { border-color: var(--app); background: var(--app-claro); }
table.lista { width: 100%; border-collapse: collapse; }
table.lista th { text-align: left; font-size: 12.5px; color: var(--suave); font-weight: 600; padding: 6px 8px;
                 border-bottom: 1px solid var(--borde); }
table.lista td { padding: 8px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
table.lista tr:last-child td { border-bottom: 0; }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.e-OK { color: var(--ok); background: var(--ok-fondo); }
.e-revisar { color: var(--rev); background: var(--rev-fondo); }
.e-error { color: var(--mal); background: var(--mal-fondo); }
.e-pendiente, .e-cola { color: var(--pend); background: var(--pend-fondo); }
.e-curso { color: var(--app); background: var(--app-claro); }
button, .boton { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer;
                 background: var(--app); color: #fff; text-decoration: none; display: inline-block; }
button.secundario, .boton.secundario { background: #fff; color: var(--app); border: 1.5px solid var(--borde); }
button:disabled { opacity: .5; cursor: default; }
button.peq, .boton.peq { padding: 5px 11px; font-size: 13px; }
.acciones { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.barra { height: 8px; background: #eef0f3; border-radius: 8px; overflow: hidden; margin: 10px 0 4px; }
.barra div { height: 100%; background: var(--cielo); width: 0; transition: width .4s; }
.suave { color: var(--suave); font-size: 13px; }
.semaforo { list-style: none; padding: 0; margin: 8px 0; }
.semaforo li { padding: 3px 0; }
.problemas { margin: 6px 0 0; padding-left: 20px; color: var(--rev); font-size: 13.5px; }
.avisos { margin: 6px 0 0; padding-left: 20px; color: var(--suave); font-size: 13.5px; }
details.doc { border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); margin-bottom: 10px; }
details.doc > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
details.doc > summary::-webkit-details-marker { display: none; }
details.doc > summary .nombre { flex: 1; font-weight: 600; }
details.doc .cuerpo { padding: 0 16px 16px; border-top: 1px solid #eef0f3; }
.miniatura { max-width: 100%; border: 1px solid var(--borde); border-radius: 6px; margin-top: 10px; background: #fff; }
textarea { width: 100%; font: inherit; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; min-height: 60px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ok-txt { color: var(--ok); } .mal-txt { color: var(--mal); } .rev-txt { color: var(--rev); }
dl.datos { display: grid; grid-template-columns: 220px 1fr; gap: 6px 14px; margin: 0; }
dl.datos dt { color: var(--suave); }
dl.datos dd { margin: 0; word-break: break-all; }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; border: 1px solid #0002; }
@media (max-width: 760px) { .modos, .dos { grid-template-columns: 1fr; } header { flex-wrap: wrap; height: auto; padding: 10px 16px; } }

/* Pantalla «Fichas» */
header nav .globo { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
                    background: var(--cielo); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 18px; }
a.etiqueta { text-decoration: none; }
.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.campos label { font-size: 13px; color: var(--suave); display: flex; flex-direction: column; gap: 4px; }
.campos input, .campos select { font: inherit; color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 7px 9px; }
.resumen-ficha { font-size: 13.5px; position: sticky; top: 0; z-index: 2; padding: 10px 16px; }
.bloque { display: grid; grid-template-columns: 110px 1fr 230px; gap: 14px; align-items: start; background: var(--panel);
          border: 1px solid var(--borde); border-left: 5px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.bloque.es-dato { border-left-color: var(--rev); background: #fffaf2; }
.bloque.es-quitar { border-left-color: var(--pend); opacity: .65; }
.bloque.es-quitar .original { text-decoration: line-through; }
.bloque.cambiada { box-shadow: 0 0 0 2px var(--cielo) inset; }
.b-tipo { font-size: 12.5px; font-weight: 600; color: var(--app); }
.b-tipo .suave { display: block; font-weight: 400; }
.b-cuerpo { min-width: 0; }
.b-cuerpo .original { color: var(--suave); font-size: 13.5px; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.b-cuerpo textarea.fijo { min-height: 0; font-size: 14px; }
.b-cuerpo code.queda { background: var(--rev-fondo); color: var(--rev); padding: 1px 6px; border-radius: 4px; }
.motivo { margin-top: 6px; font-size: 12.5px; }
.b-opciones { display: flex; flex-direction: column; gap: 5px; }
.op { background: #fff; color: var(--texto); border: 1.5px solid var(--borde); padding: 5px 10px; font-size: 13px; font-weight: 500; text-align: left; position: relative; }
.op.propuesta { padding-right: 74px; }
.op.propuesta::after { content: "propuesta"; position: absolute; right: 8px; top: 6px; font-size: 10.5px; color: var(--suave); }
.op.elegida { background: var(--app); color: #fff; border-color: var(--app); }
.op.elegida.propuesta::after { color: #fffb; }
.tabla-prev { overflow-x: auto; }
.tabla-prev table { border-collapse: collapse; font-size: 12px; }
.tabla-prev th { background: var(--app); color: #fff; padding: 3px 7px; border: 1px solid #fff; font-weight: 600; }
.tabla-prev td { border: 1px solid var(--borde); padding: 3px 7px; color: var(--suave); }
.bloque.tabla-dato .tabla-prev td, .bloque.tabla-cuestionario .tabla-prev td:not(.col1) { text-decoration: line-through; background: #fbf3e6; }
.barra-ficha { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
               background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; margin-top: 16px;
               box-shadow: 0 -4px 14px #13294b14; }
.barra-ficha #estado { margin-right: auto; }
@media (max-width: 760px) { .campos { grid-template-columns: 1fr; } .bloque { grid-template-columns: 1fr; } }
.recorte { display: block; margin-bottom: 8px; }
.recorte img { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--borde); border-radius: 6px;
               background: #fff; object-fit: contain; object-position: left top; }
.recorte:hover img { border-color: var(--cielo); }

/* Comparar original y resultado */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.comparar h2 { margin: 0 0 8px; font-size: 15px; position: sticky; top: 0; background: var(--fondo); padding: 6px 0; z-index: 1; }
.comparar .hoja { margin-bottom: 14px; }
.comparar .hoja img { display: block; width: 100%; border: 1px solid var(--borde); border-radius: 4px; background: #fff;
                      box-shadow: 0 1px 4px #13294b14; aspect-ratio: 210 / 297; object-fit: contain; }
.comparar .hoja span { font-size: 12px; color: var(--suave); }
.comparar .hoja a:hover img { border-color: var(--cielo); }
main.ancho { max-width: 1400px; }
@media (max-width: 760px) { .comparar { gap: 8px; } }

/* «Revisar»: búsqueda y archivo */
.barra-revisar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.barra-revisar input[type=search] { flex: 1; min-width: 220px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; }
section.lote h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
section.lote h2 button.archivar { margin-left: auto; font-size: 12px; padding: 3px 10px; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--app); }

/* Normativa */
.norma-busca { display: flex; gap: 10px; margin: 0 0 16px; }
.norma-busca input[type=search] { flex: 1; font: inherit; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; }
.norma { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.norma-lista { list-style: none; margin: 0; padding: 0; max-height: 75vh; overflow: auto; }
.norma-lista li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: 14px; }
.norma-lista li a:hover { background: var(--app-claro); }
.norma-lista li a.activa { background: var(--app); color: #fff; }
.norma-lista li a.activa .suave { color: #dfe7f1; }
.norma-lista mark, .norma-texto mark { background: var(--arena); color: inherit; }
.norma-texto h2 { margin-top: 0; }
.norma-texto .p { margin: 0 0 8px; white-space: pre-wrap; }
.norma-texto .titulillo { font-weight: 700; }
.norma-texto table { border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.norma-texto td { border: 1px solid var(--borde); padding: 4px 8px; vertical-align: top; }
.norma-sello { background: var(--app-claro); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; }
.aviso-norma { background: var(--rev-fondo); color: var(--rev); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
@media (max-width: 760px) { .norma { grid-template-columns: 1fr; } }
.norma-libros summary { cursor: pointer; }
.tabla-libros { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.tabla-libros th { text-align: left; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--borde); padding: 6px 8px; }
.tabla-libros td { border-bottom: 1px solid var(--borde); padding: 8px; vertical-align: top; }
.norma-busca select { font: inherit; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; background: #fff; }
@media (max-width: 760px) { .norma-busca { flex-wrap: wrap; } .tabla-libros { font-size: 13px; } }

/* Comprobar OM */
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.filtros button.activo { background: var(--app); color: #fff; border-color: var(--app); }
table.comp td { vertical-align: top; font-size: 14px; }
table.comp tr.est-falta td:first-child, table.comp tr.est-no_encontrada td:first-child, table.comp tr.est-obsoleta td:first-child { box-shadow: 3px 0 0 var(--mal) inset; }
table.comp tr.est-revisar td:first-child, table.comp tr.est-cambia td:first-child, table.comp tr.est-futura td:first-child { box-shadow: 3px 0 0 var(--rev) inset; }
details.amc summary { cursor: pointer; font-size: 12.5px; }
details.amc div { margin-top: 4px; font-size: 13px; }
@media (max-width: 760px) { table.comp { font-size: 13px; } }

/* Pantalla «Auditorías» */
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.cal-mes { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; min-height: 84px; }
.cal-nombre { font-weight: 700; color: var(--app); font-size: 13.5px; margin-bottom: 6px; }
.cal-aud { font-size: 13px; padding: 4px 0; border-top: 1px solid #eef0f3; }
.cal-aud .etiqueta { margin-left: 4px; }
.cal-aud.fuera b { color: var(--mal); }
table.editable td { padding: 4px; }
table.editable input, table.editable select { font: inherit; font-size: 13.5px; border: 1px solid var(--borde); border-radius: 6px; padding: 5px 7px; }
.dos label textarea { margin-top: 4px; }
@media (max-width: 760px) { .cal { grid-template-columns: 1fr 1fr; } }

/* sesión (solo con usuarios) */
.sesion { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sesion a { color: #fff; opacity: .9; white-space: nowrap; }
.sesion button { padding: 4px 10px; font-size: 13px; }
.entrar { max-width: 360px; margin: 12vh auto; background: #fff; padding: 28px; border-radius: 10px;
          box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.entrar img { height: 44px; display: block; margin-bottom: 16px; }
.entrar label { display: block; margin: 12px 0 4px; font-weight: 600; }
.entrar input { width: 100%; box-sizing: border-box; padding: 8px; }
.entrar button { width: 100%; margin-top: 18px; }
.entrar .error { color: #b00020; min-height: 1.5em; margin-top: 10px; }