/* Portal de informes CCTV — OVICAL. Mismos azules que las tablas del informe (.docx). */
:root {
  color-scheme: light;
  --marino: #1d3557;
  --marino-2: #284a75;
  --azul: #2563a6;
  --azul-hover: #1d4f86;
  --azul-medio: #8db4e2;
  --azul-claro: #dce6f1;
  --fondo: #f3f5f8;
  --tarjeta: #ffffff;
  --borde: #dfe4ea;
  --texto: #1f2933;
  --suave: #5f6b7a;
  --verde: #1f7a4d;
  --verde-fondo: #e3f4ea;
  --ambar: #9a5b00;
  --ambar-fondo: #fdf0d8;
  --rojo: #b42318;
  --rojo-fondo: #fde8e6;
  --gris-fondo: #eceff3;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }
h2 { font-size: 1.05rem; margin: 0 0 .85rem; letter-spacing: .01em; }
h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
a { color: var(--azul); }

/* --- Cabecera ----------------------------------------------------------------------------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  background: var(--marino); color: #fff;
}
.panel .cabecera { background: #14253d; }
.marca { font-size: 1.1rem; font-weight: 500; white-space: nowrap; }
.marca-nombre { font-weight: 800; letter-spacing: .08em; }
.marca-sep { margin: 0 .45em; color: var(--azul-medio); }
.usuario { display: flex; align-items: center; gap: .9rem; font-size: .92rem; min-width: 0; }
.usuario #nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera .boton-texto { color: #fff; border-color: rgb(255 255 255 / 35%); }
.insignia {
  background: #f59e0b; color: #1f2933; text-decoration: none; font-weight: 600;
  border-radius: 999px; padding: .1rem .6rem; font-size: .82rem;
}
.banda-alerta {
  margin: 0; padding: .5rem 1rem; text-align: center;
  background: var(--ambar-fondo); color: var(--ambar); font-size: .9rem;
}

/* --- Rejilla ------------------------------------------------------------------------------ */
.rejilla {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  max-width: 1280px; margin: 0 auto; padding: 1.25rem clamp(1rem, 3vw, 2rem) 2rem;
}
.columna { display: grid; gap: 1.25rem; min-width: 0; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.1rem 1.25rem; min-width: 0;
}
@media (max-width: 900px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* --- Botones ------------------------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.4rem; padding: .45rem 1rem; border-radius: 8px; border: 1px solid var(--azul);
  background: var(--azul); color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.boton:hover { background: var(--azul-hover); border-color: var(--azul-hover); }
.boton:focus-visible, .boton-texto:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible { outline: 3px solid var(--azul-medio); outline-offset: 2px; }
.boton:disabled { opacity: .55; cursor: default; }
.boton-secundario { background: #fff; color: var(--azul); }
.boton-secundario:hover { background: var(--azul-claro); color: var(--azul-hover); }
.boton-peligro { background: #fff; color: var(--rojo); border-color: #e7b3ae; }
.boton-peligro:hover { background: var(--rojo-fondo); border-color: var(--rojo); color: var(--rojo); }
.boton-ancho { width: 100%; }
.boton-texto {
  background: none; border: 1px solid var(--borde); border-radius: 6px; color: var(--azul);
  padding: .25rem .65rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.botones { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

/* --- Subir -------------------------------------------------------------------------------- */
.soltar {
  display: grid; justify-items: center; gap: .55rem; text-align: center;
  padding: 1.6rem 1rem; border: 2px dashed var(--azul-medio); border-radius: var(--radio);
  background: #f7faff; color: var(--suave); transition: background .15s, border-color .15s;
}
.soltar p { margin: 0; }
.soltar.encima { background: var(--azul-claro); border-color: var(--azul); }
.soltar-icono {
  width: 42px; height: 42px; fill: none; stroke: var(--azul); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.resumen, .progreso {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; background: #fbfcfe;
}
.resumen-titulo { margin: 0 0 .4rem; font-weight: 600; overflow-wrap: anywhere; }
.omitidos { margin: .2rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--suave); max-height: 8rem; overflow: auto; }
.omitidos li { overflow-wrap: anywhere; }
progress { width: 100%; height: .8rem; accent-color: var(--azul); }
.nota { color: var(--suave); font-size: .86rem; margin: .5rem 0 0; overflow-wrap: anywhere; }
.nota-candado { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; }
.nota-candado svg {
  flex: none; width: 18px; height: 18px; margin-top: .1rem; fill: none; stroke: var(--verde);
  stroke-width: 2; stroke-linecap: round;
}
.nota-alerta {
  color: var(--rojo); background: var(--rojo-fondo); border-radius: 6px;
  padding: .45rem .7rem; font-size: .88rem; margin: .5rem 0 0; overflow-wrap: anywhere;
}
.texto-alerta { color: var(--rojo); }
.centrado { text-align: center; }

/* --- Carpetas ----------------------------------------------------------------------------- */
.trabajos, .lista-simple { list-style: none; margin: 0; padding: 0; }
.trabajo { padding: .85rem 0; border-top: 1px solid var(--borde); }
.trabajo:first-child { border-top: 0; padding-top: .2rem; }
.trabajo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.carpeta { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.trabajo-datos { color: var(--suave); font-size: .86rem; margin-top: .1rem; }
.trabajo-nota { margin: .4rem 0 0; font-size: .9rem; }
.trabajo-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.trabajo-acciones:empty { display: none; }
.trabajo-borrado { opacity: .62; }
.estado {
  flex: none; border-radius: 999px; padding: .12rem .65rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .02em; background: var(--gris-fondo); color: var(--suave); white-space: nowrap;
}
.estado-subiendo, .estado-analizando { background: var(--azul-claro); color: var(--azul-hover); }
.estado-en_cola { background: var(--gris-fondo); color: #3d4a5c; }
.estado-en_revision { background: var(--ambar-fondo); color: var(--ambar); }
.estado-listo { background: var(--verde-fondo); color: var(--verde); }
.estado-falta_parte, .estado-error { background: var(--rojo-fondo); color: var(--rojo); }

/* --- Chat --------------------------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; height: min(78vh, 760px); }
.chat-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.chat-cabeza select { font: inherit; padding: .2rem .4rem; }
.mensajes {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem;
  padding: .25rem .15rem .5rem; min-height: 12rem;
}
.mensaje {
  max-width: 88%; padding: .5rem .75rem; border-radius: 12px; background: var(--gris-fondo);
  align-self: flex-start;
}
.mensaje-mio { align-self: flex-end; background: var(--azul-claro); }
.mensaje-auto { background: #fff; border: 1px dashed var(--borde); }
.mensaje-claude { background: #eef0fb; }
.mensaje-pendiente { border: 2px solid #f59e0b; background: var(--ambar-fondo); }
.mensaje-autor { font-size: .75rem; color: var(--suave); margin-bottom: .1rem; }
.mensaje-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-chat { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; }
.form-chat textarea {
  flex: 1; resize: vertical; min-height: 2.6rem; max-height: 10rem; padding: .5rem .65rem;
  border: 1px solid var(--borde); border-radius: 8px; font: inherit;
}
.interruptor { display: flex; gap: .45rem; align-items: center; font-size: .86rem; color: var(--suave); margin-bottom: .5rem; }

/* --- Panel: clientes, avisos, registro ---------------------------------------------------- */
.cliente {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem 0; border-top: 1px solid var(--borde); font-size: .92rem;
}
.cliente:first-child { border-top: 0; }
.avisos { max-height: 22rem; overflow-y: auto; }
.aviso { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--borde); font-size: .88rem; }
.aviso:first-child { border-top: 0; }
.aviso.sin-leer { font-weight: 600; }
.aviso-tipo-bloqueo, .aviso-tipo-dispositivo_nuevo, .aviso-tipo-limpieza { color: var(--rojo); }
.aviso-fecha { color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400; }
.registro { max-width: 1280px; margin: 0 auto 2rem; width: calc(100% - 2 * clamp(1rem, 3vw, 2rem)); }
.registro summary { cursor: pointer; font-weight: 600; }
.registro-lista { margin-top: .6rem; font-size: .84rem; max-height: 26rem; overflow-y: auto; }
.registro-lista li { padding: .2rem 0; display: flex; gap: .6rem; overflow-wrap: anywhere; }

/* --- Entrar ------------------------------------------------------------------------------- */
.pagina-entrar { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, var(--marino) 0 40%, var(--fondo) 40%); }
.caja-entrar { width: min(380px, calc(100vw - 2rem)); }
.marca-grande { color: #fff; font-size: 1.35rem; text-align: center; margin-bottom: 1.2rem; }
.caja-entrar form { display: grid; gap: .9rem; padding: 1.4rem; }
.caja-entrar label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; color: #3d4a5c; }
.caja-entrar input {
  font: inherit; font-weight: 400; padding: .6rem .7rem; border: 1px solid #c9d1db; border-radius: 8px;
}
.caja-entrar input[name="codigo"] { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* --- Llave de acceso ---------------------------------------------------------------------- */
.boton-grande { min-height: 3rem; font-size: 1.02rem; }
.caja-llave { display: grid; gap: .6rem; padding: 1.4rem; margin-bottom: 1rem; }
.caja-llave .nota { margin: 0; }
.reserva { margin-bottom: .8rem; }
.reserva summary {
  cursor: pointer; color: #fff; text-align: center; font-size: .9rem; margin-bottom: .6rem;
  list-style-position: inside;
}
.reserva[open] summary { color: var(--suave); }
.caja-llave:not([hidden]) ~ .reserva summary { color: var(--suave); }

/* --- Alta con enlace ---------------------------------------------------------------------- */
.caja-alta { width: min(460px, calc(100vw - 2rem)); padding: 1.5rem 0; }
.caja-alta .tarjeta { padding: 1.4rem; }
.form-alta { display: grid; gap: .9rem; }
.caja-alta form.form-alta { padding: 0; }
.caja-alta h2 { margin-bottom: .6rem; }
.form-alta label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; color: #3d4a5c; }
.form-alta input {
  font: inherit; font-weight: 400; padding: .6rem .7rem; border: 1px solid #c9d1db; border-radius: 8px;
}
.form-alta input[readonly] { background: var(--azul-claro); font-weight: 700; color: var(--marino); }
.form-alta .nota { margin: -.4rem 0 0; }
.paso-codigo {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; background: #fbfcfe;
  display: grid; justify-items: center; gap: .5rem; text-align: center;
}
.paso-codigo .nota { margin: 0; }
.paso-titulo { margin: 0; font-weight: 700; }
.qr { width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: 6px; border: 1px solid var(--borde); }
.clave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.enlace-alta {
  width: 100%; font: inherit; font-size: .85rem; padding: .5rem .6rem; border: 1px solid #c9d1db;
  border-radius: 8px; background: #fbfcfe;
}
.dialogo label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; margin-top: .8rem; }
.dialogo input[type="text"] { font: inherit; padding: .55rem .7rem; border: 1px solid #c9d1db; border-radius: 8px; }
.cliente-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Diálogo y avisos flotantes ----------------------------------------------------------- */
.dialogo {
  border: 0; border-radius: var(--radio); padding: 1.3rem 1.4rem; max-width: min(460px, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgb(16 24 40 / 30%);
}
.dialogo::backdrop { background: rgb(16 24 40 / 45%); }
.dialogo p { margin: 0; color: #3d4a5c; overflow-wrap: anywhere; }
.avisos-flotantes {
  position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 10;
  max-width: min(420px, calc(100vw - 2rem));
}
.aviso-flotante {
  padding: .7rem 1rem; border-radius: 8px; background: var(--marino); color: #fff;
  box-shadow: var(--sombra); font-size: .92rem; overflow-wrap: anywhere;
}
.aviso-error { background: var(--rojo); }

@media (max-width: 520px) {
  .marca { font-size: 1rem; }
  .trabajo-cabeza { align-items: flex-start; }
  .boton { white-space: normal; }
  .mensaje { max-width: 100%; }
}