/* Fichas de datos · CER UACh — estilo tomado del Gestor de Proyectos CER (Tailwind: paleta cer, Inter, grises de Tailwind) */
:root {
  --vino: #7a2733;
  --vino-oscuro: #531a22;
  --vino-claro: #f7e9eb;
  --gris-fondo: #f9fafb;
  --gris-tinta: #1f2937;
  --blanco: #ffffff;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g300: #d1d5db;
  --g400: #9ca3af;
  --g500: #6b7280;
  --g600: #4b5563;
  --g700: #374151;
  --g900: #111827;
  --rojo: #dc2626;
  --rojo-claro: #fef2f2;
  --ambar: #a16207;
  --ambar-claro: #fefce8;
  --verde: #15803d;
  --verde-claro: #f0fdf4;
  --fuente: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lateral: 16rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--gris-fondo); color: var(--gris-tinta); font: 14px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; color: var(--g900); }
code { font-family: var(--mono); font-size: 0.9em; }
a { color: var(--vino); }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--g400); }

/* ---------- Botones ---------- */
.btn { font: inherit; font-size: 14px; font-weight: 500; border-radius: 0.5rem; padding: 0.55rem 1rem; cursor: pointer; border: 1px solid var(--g200); background: var(--blanco); color: var(--g700); display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.3; transition: background .15s, color .15s, border-color .15s, transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn-sec:hover { background: var(--gris-fondo); color: var(--vino); }
.btn-pri { background: var(--vino); border-color: var(--vino); color: var(--blanco); box-shadow: 0 4px 6px -1px rgba(122,39,51,.2); }
.btn-pri:hover { background: var(--vino-oscuro); border-color: var(--vino-oscuro); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-ancho { width: 100%; justify-content: center; padding: 0.65rem 1rem; margin-top: 0.5rem; }
.btn-icono { border: 0; background: transparent; color: var(--g600); padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; display: inline-flex; }
.btn-icono:hover { background: var(--g100); }
.btn-icono.salir { color: var(--g400); }
.btn-icono.salir:hover { color: #ef4444; background: var(--rojo-claro); }
.btn:focus-visible, .btn-icono:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip input:focus-visible + span, a:focus-visible {
  outline: 2px solid var(--vino); outline-offset: 2px;
}

/* ---------- Pantallas de sesión ---------- */
.pantalla-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pantalla-centro.columna { flex-direction: column; text-align: center; gap: 0.5rem; }
.pantalla-centro h2 { font-size: 1.5rem; margin: 0.5rem 0 0; }
.texto-vino { color: var(--vino); font-weight: 500; }
.texto-centro { color: var(--g500); max-width: 28rem; margin: 0; }
.texto-tenue { color: var(--g400); font-size: 13px; margin: 0.5rem 0 0.75rem; }
.icono-alerta { width: 3rem; height: 3rem; color: #eab308; margin-top: 1rem; }
.tarjeta-ingreso { background: var(--blanco); border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); border: 1px solid var(--g100); padding: 2rem; width: 100%; max-width: 28rem; }
.ingreso-cabecera { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; text-align: center; }
.logo-grande { height: 5rem; width: 5rem; object-fit: contain; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 0.75rem; }
.logo-mediano { height: 4rem; width: 4rem; object-fit: contain; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 0.5rem; }
.ingreso-titulo { color: var(--vino-oscuro); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.ingreso-sub { color: var(--g500); font-size: 14px; margin: 0.5rem 0 0; }
.pila { display: grid; gap: 1rem; }
.etiqueta-form { display: block; font-size: 14px; font-weight: 600; color: var(--g700); margin-bottom: 0.375rem; }
.aviso-error { background: var(--rojo-claro); color: var(--rojo); padding: 0.75rem; border-radius: 0.5rem; font-size: 14px; margin-bottom: 1.5rem; border: 1px solid #fee2e2; }
.ingreso-nota { margin: 2rem 0 0; text-align: center; font-size: 13.5px; color: var(--g600); }
.ingreso-nota a { font-weight: 600; text-decoration: none; }
.ingreso-nota a:hover { text-decoration: underline; }
.desarrollado { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--g100); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 12px; color: var(--g400); }
.desarrollado.chico { margin-top: 0.5rem; padding-top: 0.75rem; font-size: 10px; }
.desarrollado a { opacity: 0.7; transition: opacity .15s; display: inline-flex; }
.desarrollado a:hover { opacity: 1; }
.logo-nasp { height: 1.1rem; object-fit: contain; }

/* ---------- Disposición de la aplicación ---------- */
.app { display: flex; height: 100vh; overflow: hidden; }
.lateral { width: var(--lateral); background: var(--blanco); border-right: 1px solid var(--g200); display: flex; flex-direction: column; height: 100%; flex-shrink: 0; }
.lateral-marca { padding: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.lateral-marca > div { flex: 1; line-height: 1.2; min-width: 0; }
.logo-lateral { height: 2.5rem; width: 2.5rem; object-fit: contain; border-radius: 0.5rem; flex-shrink: 0; }
.marca-titulo { display: block; color: var(--vino-oscuro); font-weight: 700; font-size: 1.125rem; }
.marca-sub { display: block; font-size: 10px; color: var(--g400); text-transform: uppercase; letter-spacing: 0.05em; }
.lateral-nav { flex: 1; overflow-y: auto; padding: 0 1rem; }
.lateral-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.lateral-nav a { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: 0.5rem; font-size: 14px; font-weight: 500; color: var(--g600); text-decoration: none; transition: background .15s, color .15s; }
.lateral-nav a:hover { background: var(--gris-fondo); color: var(--vino); }
.lateral-nav a.activo { background: var(--vino-claro); color: var(--vino-oscuro); }
.cuenta { font-size: 11px; font-weight: 600; min-width: 1.4rem; text-align: center; border-radius: 999px; padding: 0 0.4rem; line-height: 1.5; font-variant-numeric: tabular-nums; margin-top: 1px; }
.cuenta.err { background: var(--rojo-claro); color: var(--rojo); }
.cuenta.ok { color: var(--verde); }
.resumen { padding: 0.75rem 1.5rem; font-size: 12.5px; color: var(--g500); overflow-wrap: anywhere; border-top: 1px solid var(--g100); }
.resumen strong { color: var(--g900); }
.lateral-pie { padding: 1rem; border-top: 1px solid var(--g200); }
.volver-gestor { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; font-weight: 500; color: var(--g500); text-decoration: none; padding: 0.4rem 0.5rem; border-radius: 0.5rem; margin-bottom: 0.25rem; }
.volver-gestor svg { width: 1rem; height: 1rem; }
.volver-gestor:hover { color: var(--vino); background: var(--gris-fondo); }
.usuario { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; }
.avatar { width: 2rem; height: 2rem; border-radius: 999px; background: var(--vino); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); flex-shrink: 0; }
.usuario-datos { flex: 1; min-width: 0; }
.usuario-datos p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-nombre { font-size: 14px; font-weight: 500; color: var(--g900); }
.usuario-rol { font-size: 12px; color: var(--g500); }

.principal { flex: 1; min-width: 0; overflow-y: auto; }
.barra-movil { display: none; position: sticky; top: 0; z-index: 30; align-items: center; gap: 0.75rem; background: var(--blanco); border-bottom: 1px solid var(--g200); padding: 0 1rem; height: 3.5rem; }
.barra-movil .marca-titulo { font-size: 1rem; }
.logo-movil { height: 1.75rem; width: 1.75rem; object-fit: contain; border-radius: 0.25rem; }
.solo-movil { display: none; }
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; }

.pagina { max-width: 72rem; margin: 0 auto; padding: 2rem 2rem 9rem; }
.encabezado { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.encabezado h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.encabezado .sub { margin: 0.25rem 0 0; color: var(--g500); font-size: 14px; }
.encabezado-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Tarjetas y campos ---------- */
.contenido { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
#ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.tarjeta { background: var(--blanco); border: 1px solid var(--g100); border-radius: 0.75rem; padding: 1.5rem; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); scroll-margin-top: 1rem; }
.tarjeta h2 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; }
.intro { margin: 0 0 1.25rem; color: var(--g500); max-width: 72ch; }

.zona { position: relative; border: 2px dashed var(--g200); border-radius: 0.75rem; padding: 1.5rem; text-align: center; background: var(--gris-fondo); transition: border-color .15s, background .15s; }
.zona:hover, .zona.arrastrando { border-color: var(--vino); background: var(--vino-claro); }
.zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.zona-texto { color: var(--g500); pointer-events: none; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.zona-texto svg { color: var(--vino); }
.zona-texto strong { color: var(--vino); }
.capa-elegir { margin-top: 1rem; max-width: 26rem; }
.lectura-resultado { margin-top: 1rem; }
.lectura-resultado table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.lectura-resultado td { padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--g100); vertical-align: top; overflow-wrap: anywhere; }
.lectura-resultado td:first-child { color: var(--g500); width: 34%; }
.nota { padding: 0.65rem 0.85rem; border-radius: 0.5rem; font-size: 13.5px; margin-top: 0.5rem; border: 1px solid var(--g200); background: var(--gris-fondo); }
.nota.err { background: var(--rojo-claro); color: var(--rojo); border-color: #fee2e2; }
.nota.aviso { background: var(--ambar-claro); color: var(--ambar); border-color: #fef08a; }
.nota.ok { background: var(--verde-claro); color: var(--verde); border-color: #bbf7d0; }

.bloque-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; scroll-margin-top: 5rem; }
.campo-cab { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; }
.campo-cab label, .campo-cab .etiqueta { font-weight: 600; color: var(--g700); font-size: 14px; }
.cid { font-family: var(--mono); font-size: 11.5px; color: var(--g400); overflow-wrap: anywhere; }
.insignia { font-size: 11px; font-weight: 500; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--g100); color: var(--g600); }
.insignia.si { background: var(--vino-claro); color: var(--vino-oscuro); }
.insignia.cond { background: var(--ambar-claro); color: var(--ambar); }
.ayuda { margin: 0; font-size: 13px; color: var(--g500); max-width: 78ch; overflow-wrap: anywhere; }
.ayuda em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--g600); }
.iso { font-size: 11.5px; color: var(--g400); font-family: var(--mono); overflow-wrap: anywhere; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=number], select, textarea {
  font: inherit; font-size: 14px; width: 100%; max-width: 42rem; padding: 0.6rem 0.9rem; border: 1px solid var(--g200); border-radius: 0.5rem; background: var(--blanco); color: var(--g900); transition: border-color .15s, box-shadow .15s;
}
.tarjeta-ingreso input { max-width: none; padding: 0.65rem 1rem; }
input:focus, select:focus, textarea:focus { border-color: var(--vino); box-shadow: 0 0 0 1px var(--vino); outline: none; }
textarea { max-width: 100%; resize: vertical; }
input[readonly] { background: var(--gris-fondo); color: var(--g500); }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: #fca5a5; background: #fffafa; }
.campo.invalido .chips { border-color: #fca5a5; }
.mensajes { display: grid; gap: 0.1rem; }
.msg { font-size: 13px; }
.msg.err { color: var(--rojo); }
.msg.aviso { color: var(--ambar); }
.contador { font-size: 11.5px; color: var(--g400); font-variant-numeric: tabular-nums; }
.opcion-ayuda { font-size: 12.5px; color: var(--g500); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 1px solid transparent; border-radius: 0.6rem; padding: 2px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--g200); border-radius: 999px; font-size: 13px; background: var(--blanco); color: var(--g600); transition: background .15s, border-color .15s; }
.chip:hover span { border-color: var(--vino); }
.chip input:checked + span { background: var(--vino-claro); border-color: var(--vino); color: var(--vino-oscuro); font-weight: 500; }
.chip small { color: var(--g400); font-family: var(--mono); font-size: 10.5px; margin-left: 0.3rem; }

.bbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 42rem; }
.bbox label { font-size: 12px; color: var(--g500); display: grid; gap: 0.15rem; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--g100); border-radius: 0.6rem; }
.controles { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 760px; }
.controles th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g500); padding: 0.6rem 0.75rem; background: var(--gris-fondo); border-bottom: 1px solid var(--g200); }
.controles td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--g100); vertical-align: top; }
.controles tr:last-child td { border-bottom: 0; }
.controles select { min-width: 9rem; max-width: 11rem; font-size: 13px; padding: 0.4rem 0.6rem; }
.controles input { min-width: 9rem; max-width: 13rem; font-size: 13px; padding: 0.4rem 0.6rem; }
.como { font-size: 12px; white-space: nowrap; color: var(--g500); }
.fila-no_conforme td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.fila-conforme td:first-child { box-shadow: inset 3px 0 0 #22c55e; }

.xml { overflow-x: auto; font-family: var(--mono); font-size: 12px; background: var(--gris-fondo); border: 1px solid var(--g100); border-radius: 0.5rem; padding: 1rem; max-height: 26rem; white-space: pre; margin: 0; }

/* ---------- Barra de acciones ---------- */
.acciones { position: fixed; left: var(--lateral); right: 0; bottom: 0; background: var(--blanco); border-top: 1px solid var(--g200); z-index: 30; box-shadow: 0 -4px 6px -1px rgba(0,0,0,.04); }
.acciones-in { max-width: 72rem; margin: 0 auto; padding: 0.75rem 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.acciones-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.estado { font-size: 13.5px; color: var(--g500); }
.estado.err { color: var(--rojo); }
.estado.ok { color: var(--verde); }
.confirmar { max-width: 72rem; margin: 0 auto; padding: 0 2rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.confirmar p { margin: 0; color: var(--ambar); font-size: 13.5px; }
.confirmar-botones { display: flex; gap: 0.5rem; }

/* ---------- Móvil (como el gestor: menú lateral oculto bajo md) ---------- */
@media (max-width: 767px) {
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .3s; }
  .lateral.abierto { transform: translateX(0); }
  .barra-movil { display: flex; }
  .solo-movil { display: inline-flex; }
  .pagina { padding: 1.25rem 1rem 12rem; }
  .acciones { left: 0; }
  .acciones-in, .confirmar { padding-left: 1rem; padding-right: 1rem; }
  .bbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (min-width: 768px) {
  .velo { display: none !important; }
}

/* Campo completo y sin errores */
.campo.valido input:not([type=checkbox]), .campo.valido select, .campo.valido textarea { border-color: #86efac; background: var(--verde-claro); }
.campo.valido .chips { border-color: #86efac; }
.campo.valido .campo-cab label::after, .campo.valido .campo-cab .etiqueta::after { content: ' ✓'; color: var(--verde); font-weight: 700; }