/* =========================================================
   Rimo Solar — hoja de estilos única.
   Sin frameworks, sin compilación. Se edita y se recarga.
   ========================================================= */

/*
 * PALETA DE MARCA — tomada del SVG oficial (public/img/rimo-solar.svg),
 * que es el archivo vectorial de Illustrator, no una muestra de pantalla:
 *
 *   ambar  #F9AF1A  — el sol y la R
 *   negro  #0A090B  — el logotipo "RIMO SOLAR"
 *
 * No hay azul en la marca. El azul que habia aqui antes me lo invente yo.
 *
 * El ambar NO sirve para texto ni para botones: sobre blanco da 2,0:1 de
 * contraste y es ilegible. Va donde es una SENAL —subrayados, la pestana
 * activa, el dia de hoy— y el negro hace el trabajo pesado.
 *
 * Los colores de estado (ok / mal / atrasado) NO son de marca: son
 * significado. Se dejan como estaban.
 */
:root {
  --tinta:        #14131a;
  --tinta-suave:  #5d5c66;
  --tinta-tenue:  #97959f;
  --papel:        #f5f4f2;
  --superficie:   #ffffff;
  --borde:        #e4e2df;
  --borde-fuerte: #cac7c2;
  --marca:        #0a090b;
  --marca-clara:  #fdf2da;
  --sol:          #f9af1a;
  --sol-tenue:    #fde3ab;

  /*
   * COLORES DE ESTADO — no son de marca, son significado.
   *
   * Estaban USADOS en quince sitios (avisos, pastillas, mensajes de
   * error, cifras en rojo) pero no DEFINIDOS en ningun lado: al
   * reescribir la paleta con los colores del SVG oficial se cayeron de
   * aqui y nadie lo noto, porque `var(--mal)` sin valor no rompe la
   * pagina: simplemente no pinta nada y el texto se queda del color que
   * hereda. Un error en rojo que sale negro parece un texto mas.
   *
   * Los tonos salen de las pastillas de asistencia, que si sobrevivieron
   * (.est-puntual y .est-falta), para que toda la app hable el mismo
   * verde y el mismo rojo.
   */
  --ok:           #14663d;
  --ok-piel:      #e3f4ea;
  --mal:          #9c2419;
  --mal-piel:     #fbe7e5;
  --ojo:          #8a5b06;
  --ojo-piel:     #fdf0d6;

  --radio: 8px;
  --sombra: 0 1px 2px rgba(20, 32, 46, .06), 0 4px 12px rgba(20, 32, 46, .05);
}

* { box-sizing: border-box; }

/* Los enlaces eran azul de navegador. Negro con subrayado ambar: se leen
   como texto normal y se distinguen como enlace, con el color de la casa. */
a {
  color: var(--marca);
  text-decoration: underline;
  text-decoration-color: var(--sol);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--tinta); }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Estructura ---------- */

/* Barra oscura con el logotipo en BLANCO (rimo-solar-blanco.svg).
   Estuvo blanca un rato porque el logotipo negro desaparecia sobre el
   fondo oscuro; con la version en blanco esa razon dejo de existir, y en
   una pantalla densa la barra oscura separa mejor el menu del contenido.
   Para volver al fondo claro: cambiar este fondo y el src del layout. */
.barra {
  background: var(--tinta);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: var(--sombra);
}

.barra__marca { padding: 11px 0; display: flex; align-items: center; }
.barra__marca img { height: 30px; width: auto; display: block; }

.barra nav { display: flex; gap: 2px; flex-wrap: wrap; }

.barra nav a {
  color: #b9b7c0;
  text-decoration: none;
  padding: 16px 13px 13px;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.barra nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.barra nav a.activo { color: #fff; border-bottom-color: var(--sol); }

.envoltorio { max-width: 1500px; margin: 0 auto; padding: 24px; }

.titulo-pagina {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 650;
}
.subtitulo {
  margin: 0 0 20px;
  color: var(--tinta-suave);
  font-size: 14px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tarjeta__cabecera {
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  background: #fbfcfd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tarjeta__cuerpo { padding: 18px; }

/* ---------- Controles ---------- */

label { font-size: 13px; color: var(--tinta-suave); font-weight: 600; }

input[type="date"],
input[type="time"],
input[type="text"],
input[type="number"],
select {
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 6px 9px;
  max-width: 100%;
}
input:focus, select:focus {
  outline: 2px solid var(--marca);
  outline-offset: -1px;
  border-color: var(--marca);
}

.boton {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.boton:hover { background: #f0f3f6; }
.boton--principal {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.boton--principal:hover { background: #0d4270; }
.boton--fantasma { border-color: transparent; background: transparent; color: var(--marca); }
.boton--fantasma:hover { background: var(--marca-clara); }

.grupo-campo { display: flex; flex-direction: column; gap: 4px; }

/* OBLIGATORIO y va DESPUES de .grupo-campo: el atributo hidden del
   navegador vale "display:none", pero cualquier display propio le gana.
   Sin esta linea, campos-dependientes.js esconde campos que se siguen
   viendo. */
[hidden] { display: none !important; }

/* Numero + unidad pegada a la derecha ("10 kWh"), para no repetir la
   unidad en el rotulo y que igual quede clara al escribir. */
.campo-con-unidad { display: flex; align-items: stretch; gap: 6px; }
.campo-con-unidad input { flex: 1 1 auto; min-width: 0; }
.campo-con-unidad span {
  display: flex; align-items: center;
  color: var(--tinta-suave); font-size: 13px; white-space: nowrap;
}

/* Campo de hora: se escribe suelto ("830") y se acomoda al salir.
   tabular-nums mantiene los dígitos alineados de fila en fila. */
.campo-hora {
  width: 76px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.campo-hora::placeholder { color: var(--tinta-tenue); letter-spacing: 0; }

/* Formularios de ficha: dos columnas que se apilan en pantalla angosta */
.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ayuda { font-size: 12px; color: var(--tinta-tenue); font-weight: 400; }

/* ---------- Desplegable buscable ---------- */

.buscable { position: relative; }

/* El <select> real sigue ahí y sigue siendo el que se envía; solo se
   esconde. Sin JavaScript vuelve a aparecer y todo funciona igual. */
.buscable__oculto {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

.buscable__entrada {
  font: inherit;
  font-size: 14px;
  width: 100%;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 6px 26px 6px 9px;
}
.buscable__entrada:focus {
  outline: 2px solid var(--marca);
  outline-offset: -1px;
  border-color: var(--marca);
}

/* La flechita, para que se lea como un desplegable y no como un texto */
.buscable::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 14px;
  border: 4px solid transparent;
  border-top-color: var(--tinta-tenue);
  pointer-events: none;
}

/* Cuelga del <body>, no de la tarjeta: así ningún "overflow: hidden"
   la recorta. Como contrapartida se posiciona desde JavaScript
   (buscable.js → posicionar()), en coordenadas de ventana. */
.buscable__lista {
  display: none;
  position: fixed;
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 32, 46, .14);
}
.buscable__lista.abierta { display: block; }

.buscable__opcion {
  padding: 7px 10px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid #f0f3f6;
  /* nowrap es lo que permite que la lista se mida por su opcion mas
     larga y crezca; sin esto el texto se parte y el ancho automatico
     no sirve de nada. El ellipsis es el tope, por si aun asi no cabe. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buscable__opcion:last-child { border-bottom: none; }
.buscable__opcion:hover,
.buscable__opcion.resaltada { background: var(--marca-clara); }
.buscable__opcion.elegida { font-weight: 700; color: var(--marca); }

.buscable__vacio {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--tinta-tenue);
  text-align: center;
}

/* ---------- Prioridad de pendientes ---------- */

.prio {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
}
.prio-urgente     { background: var(--mal-piel); border-color: #f2c2bd; color: #962015; }
.prio-normal      { background: #e4eefb;        border-color: #b0cdee; color: #14508f; }
.prio-fin-del-dia { background: #f2f4f6;        border-color: #d8dee5; color: #6a7683; }

.para-quien {
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-weight: 600;
}

/* ---------- Avisos ---------- */

.aviso {
  padding: 11px 15px;
  border-radius: var(--radio);
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid;
}
.aviso--ok  { background: var(--ok-piel);  border-color: #b6e0c7; color: #10603a; }
.aviso--mal { background: var(--mal-piel); border-color: #f2c2bd; color: #962015; }
/* Intermedio: algo que hay que atender pero todavía no arde.
   Mismo amarillo que el aviso "medio" del panel de pendientes. */
.aviso--ojo { background: #fdf4e0; border-color: #f0d79a; color: #7a4f04; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Tablas ---------- */

.tabla-scroll { overflow-x: auto; }

table.datos {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
table.datos th,
table.datos td {
  border-bottom: 1px solid var(--borde);
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}
table.datos thead th {
  background: #f2f1ee;
  color: var(--tinta-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 2px solid var(--borde-fuerte);
}
table.datos tbody tr:hover { background: #faf9f7; }
table.datos tbody tr.resaltada { background: #fff6e0; }
table.datos tbody tr.resaltada:hover { background: #fdf0d2; }

.col-nombre { font-weight: 600; white-space: nowrap; }
.rol-menudo {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--tinta-tenue);
}

/* ---------- Filas extra (traslado entre obras) ---------- */

.boton-mini {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--marca);
  cursor: pointer;
  padding: 0;
}
.boton-mini:hover { background: var(--marca-clara); border-color: var(--marca); }
.boton-mini--quitar { color: var(--mal); }
.boton-mini--quitar:hover { background: var(--mal-piel); border-color: var(--mal); }

/* La fila de continuación se ve claramente colgada de la de arriba */
tr.fila-extra > td { border-top: none; }
tr.fila-extra > td:first-child { padding-left: 22px; }

.continuacion {
  font-size: 12.5px;
  font-weight: 400;
  font-style: italic;
  color: var(--tinta-tenue);
  white-space: nowrap;
}

/* ---------- Colores de estado ---------- */

.pastilla {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid;
}

.est-puntual     { background: #e3f4ea; border-color: #a9dcc0; color: #14663d; }
.est-atrasado    { background: #fdf0d6; border-color: #f0d190; color: #8a5b06; }
.est-medio-dia   { background: #e4eefb; border-color: #b0cdee; color: #14508f; }
.est-falta       { background: #fbe7e5; border-color: #eeb4ae; color: #9c2419; }
.est-justificada { background: #efe8fa; border-color: #cbb8ee; color: #56309b; }
.est-extras      { background: #e5f1f2; border-color: #a8d2d6; color: #10585f; }
.est-suspendido  { background: #e6e9ed; border-color: #c0c8d1; color: #3d4a58; }
.est-feriado     { background: #f2f4f6; border-color: #d8dee5; color: #6a7683; }
.est-otro        { background: #f2f4f6; border-color: #d8dee5; color: #6a7683; }

/* "No programado" va deliberadamente apagado: durante la auditoría el ojo
   busca huecos, y un día resuelto no debe llamar la atención. Distinto de
   la celda vacía, que sí tiene que saltar. */
.est-no-programado { background: #f7f8f9; border-color: #e2e6ea; color: #97a2ad; }

/* Etiquetas de dato faltante: se apilan varias por fila, así que
   necesitan respirar entre ellas */
.etiqueta-falta {
  margin: 2px 3px 2px 0;
  font-weight: 600;
  font-size: 11.5px;
}

.conteo-falta {
  background: var(--mal-piel);
  border: 1px solid #f2c2bd;
  color: #962015;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
}
.conteo-falta b { font-size: 14px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; }
.leyenda__item { display: flex; align-items: center; gap: 6px; color: var(--tinta-suave); }

/* ---------- Cuadrícula mensual ---------- */

.rejilla { border-collapse: collapse; font-size: 13px; width: auto; }

.rejilla th, .rejilla td {
  border: 1px solid var(--borde);
  padding: 0;
  text-align: center;
}

.rejilla thead th {
  background: #eef2f6;
  color: var(--tinta-suave);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 0;
  min-width: 30px;
  position: sticky;
  top: 0;
  z-index: 3;
}
.rejilla thead th.finde { background: #e0e5eb; color: #5b6b7d; }
.rejilla thead th.dia-hoy { background: var(--sol); color: #3d2b00; }

/* Primera columna congelada: el nombre siempre visible al hacer scroll */
.rejilla .col-fija {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--superficie);
  text-align: left;
  padding: 5px 10px;
  white-space: nowrap;
  font-weight: 600;
  border-right: 2px solid var(--borde-fuerte);
  min-width: 190px;
}
.rejilla thead .col-fija { z-index: 4; background: #eef2f6; }
.rejilla tbody tr:nth-child(even) .col-fija { background: #fafbfc; }
.rejilla tbody tr:nth-child(even) td { background: #fafbfc; }
.rejilla tbody tr:hover td { background: #f2f7fb; }
.rejilla tbody tr:hover .col-fija { background: #e8f0f8; }

.rejilla td.finde { background: #f4f6f8; }
.rejilla tbody tr:nth-child(even) td.finde { background: #eef1f4; }

/* La celda entera es el enlace: área de clic grande, sin subrayado */
.celda {
  display: block;
  padding: 5px 2px;
  min-width: 30px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 12px;
}
.celda:hover { outline: 2px solid var(--marca); outline-offset: -2px; }
.celda--vacia { color: #cdd5de; font-weight: 400; }
.celda--vacia:hover { background: var(--marca-clara); color: var(--marca); }

.celda--doble { position: relative; }
.celda--doble::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--marca);
}

/* ---------- Contador de pendientes ---------- */

.marcador {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid;
}
.marcador--pendiente { background: var(--mal-piel); border-color: #f2c2bd; color: #962015; }
.marcador--completo  { background: var(--ok-piel);  border-color: #b6e0c7; color: #10603a; }

.empujar-derecha { margin-left: auto; }

/* ---------- Portada ---------- */

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.mosaico a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: var(--sombra);
}
.mosaico a:hover { border-left-color: var(--sol); transform: translateY(-1px); }
.mosaico h3 { margin: 0 0 5px; font-size: 16px; }
.mosaico p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; }

/* ---------- Portada con panel lateral ---------- */

.con-panel {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

/* En pantallas angostas el panel baja y se pone encima: si algo está
   pendiente, es lo primero que hay que ver. */
@media (max-width: 1000px) {
  .con-panel { grid-template-columns: 1fr; }
  .con-panel > aside { order: -1; }
}

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  position: sticky;
  top: 16px;
}

.panel__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--tinta);
  color: #fff;
}
.panel__cabecera h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: .2px; }

.panel__conteo {
  margin-left: auto;
  background: var(--sol);
  color: #3d2b00;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 20px;
}

.panel__vacio {
  padding: 26px 16px;
  text-align: center;
  color: var(--tinta-tenue);
  font-size: 13.5px;
}

.aviso-panel {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  border-left: 3px solid transparent;
}
.aviso-panel p { margin: 3px 0 7px; font-size: 13.5px; line-height: 1.45; }
.aviso-panel a { color: var(--marca); text-decoration: none; font-size: 13px; font-weight: 600; }
.aviso-panel a:hover { text-decoration: underline; }

.aviso-panel__marca {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-tenue);
}

.aviso-panel--grave { border-left-color: var(--mal); background: #fffafa; }
.aviso-panel--grave .aviso-panel__marca { color: var(--mal); }
.aviso-panel--medio { border-left-color: var(--sol); }
.aviso-panel--medio .aviso-panel__marca { color: #8a5b06; }
.aviso-panel--nota  { border-left-color: var(--marca); background: #fbfbfa; }
.aviso-panel--nota .aviso-panel__marca { color: var(--marca); text-transform: none; letter-spacing: 0; font-size: 11.5px; }

.boton--mini { padding: 3px 9px; font-size: 12px; }

.panel__agregar { border-top: 1px solid var(--borde); }
.panel__agregar summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--marca);
  list-style: none;
}
.panel__agregar summary:hover { background: var(--marca-clara); }
.panel__agregar summary::-webkit-details-marker { display: none; }
.panel__agregar form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.panel__agregar textarea {
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 7px 9px;
  resize: vertical;
  color: var(--tinta);
  background: var(--superficie);
}
.panel__agregar textarea:focus,
.panel__agregar select:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.panel__agregar button { margin-top: 4px; }

.pie {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-tenue);
  font-size: 12.5px;
}

@media print {
  .barra, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .tarjeta { border: none; box-shadow: none; }
}

/* ---------- Documentos de personal ---------- */

.subtitulo-seccion {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tinta-suave);
}

.documentos-lista { display: grid; gap: 8px; }

.documento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fbfcfd;
}

/* Miniatura de tamaño fijo: con alturas distintas la lista se ve rota. */
.documento__vista {
  flex: 0 0 auto;
  width: 54px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid var(--borde);
  background: #fff;
}
.documento__vista img { width: 100%; height: 100%; object-fit: cover; }

.documento__pdf {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--mal);
}

.documento__datos { flex: 1 1 auto; min-width: 0; }
.documento__datos a {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--marca);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documento__datos a:hover { text-decoration: underline; }
.documento__datos small {
  display: block;
  font-size: 12px;
  color: var(--tinta-suave);
}

.subida { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subida input[type="file"] { font-size: 13px; max-width: 100%; }
.subida--menuda input[type="file"] { width: 150px; font-size: 12px; }

/* ---------- Validación de cédula en vivo ---------- */

.cedula-aviso {
  font-size: 12px;
  font-weight: 600;
  min-height: 16px;          /* reserva el hueco: sin esto el campo salta al aparecer el mensaje */
  color: var(--tinta-tenue);
}
.cedula-aviso[data-estado="bien"]  { color: var(--ok); }
.cedula-aviso[data-estado="medio"] { color: #8a5b06; }
.cedula-aviso[data-estado="mal"]   { color: var(--mal); }

/* ---------- Ficha de obra ---------- */

.dato__rotulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tinta-tenue);
  margin-bottom: 2px;
}
.dato__valor { font-size: 15px; font-weight: 600; }

/* Los 8 pasos del trámite CNEL */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.paso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--tinta-tenue);
}
.paso--hecho { background: var(--ok-piel); color: #10603a; }

.paso__num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 11px; font-weight: 800;
}
.paso--hecho .paso__num { background: var(--ok); border-color: var(--ok); color: #fff; }
.paso__nombre { flex: 1 1 auto; }
.paso--hecho .paso__nombre { font-weight: 600; }
.paso__fecha { font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Registro de un paso del trámite, dentro de la propia línea del paso */
.paso__alta { display: flex; align-items: center; gap: 6px; }
.paso__alta input[type="date"] { font-size: 12.5px; padding: 3px 6px; }
.paso__alta .boton { padding: 3px 10px; font-size: 12.5px; }
.paso form { margin: 0; }

/* ---------- Pantalla de acceso ----------
   Fondo oscuro y tarjeta clara: separa visualmente "todavía no entraste"
   de todo lo demás, sin necesidad de decirlo. */

.pantalla-acceso {
  background: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.acceso {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  padding: 34px 32px 26px;
  width: 100%;
  max-width: 380px;
}

.acceso__logo { height: 34px; width: auto; display: block; margin-bottom: 26px; }

.acceso__titulo {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.acceso__sub { margin: 0 0 22px; color: var(--tinta-suave); font-size: 14px; }

.acceso__forma { display: flex; flex-direction: column; gap: 16px; }
.acceso__forma input[type="email"],
.acceso__forma input[type="password"] { width: 100%; }

.acceso__recordar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-suave);
  cursor: pointer;
}

.acceso__boton { width: 100%; padding: 10px; font-size: 15px; }

.acceso__pie {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--tinta-tenue);
}

/* ---------- Quién está dentro, en la barra ---------- */

.barra__sesion {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #b9b7c0;
  white-space: nowrap;
}
.barra__sesion strong { color: #fff; font-weight: 600; }
.barra__sesion .nivel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sol);
}
.barra__salir {
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #d9d7de;
  font: inherit;
  font-size: 12.5px;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.barra__salir:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Elegir usuario y nivel al crear una cuenta ---------- */

.opciones-usuario { display: flex; flex-wrap: wrap; gap: 10px; }

.opcion-usuario {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 400;
  font-size: 13.5px;
  cursor: pointer;
}
.opcion-usuario:hover { background: var(--marca-clara); }
.opcion-usuario code { font-size: 13.5px; }
.opcion-usuario:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }

.opciones-nivel { display: flex; flex-direction: column; gap: 8px; }

.opcion-nivel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 11px 13px;
  font-weight: 400;
  cursor: pointer;
}
.opcion-nivel:hover { background: var(--marca-clara); }
.opcion-nivel:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }
.opcion-nivel input { margin-top: 3px; }
.opcion-nivel strong { display: block; font-size: 14px; color: var(--tinta); }
.opcion-nivel small { display: block; font-size: 12.5px; color: var(--tinta-suave); }

.barra__sesion a.barra__salir { text-decoration: none; }

/* ---------- Pestañas de Cobros ---------- */

.pestanas { display: flex; gap: 6px; margin-bottom: 18px; }

.pestana {
  flex: 1 1 0;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 12px 16px;
  text-decoration: none;
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 14px;
}
.pestana span {
  display: block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.pestana:hover { background: var(--papel); }
.pestana--activa {
  border-color: var(--tinta);
  border-bottom-width: 3px;
  color: var(--tinta);
}
.pestana--activa span { color: var(--tinta); }

/* ---------- Tramos de antigüedad ---------- */

.tramos { display: flex; flex-wrap: wrap; gap: 8px; }

.tramo {
  flex: 1 1 130px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--tinta);
  min-width: 130px;
}
.tramo:hover { border-color: var(--borde-fuerte); background: var(--papel); }
.tramo--activo { border-color: var(--marca); border-width: 2px; background: var(--marca-clara); }
.tramo--vacio { opacity: .45; }

.tramo__monto {
  display: block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.tramo__nombre { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); margin-top: 2px; }
.tramo__docs { display: block; font-size: 11.5px; color: var(--tinta-tenue); }

/* Columna de dinero: alineada a la derecha y con dígitos de ancho fijo */
td.plata {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Ficha de una cuenta ---------- */

.cuenta-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 18px;
  margin-bottom: 16px;
}
.cuenta-rot {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-suave);
  font-weight: 600;
}
.cuenta-n {
  display: block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cuenta-n--ok  { color: var(--ok); }
.cuenta-n--mal { color: var(--mal); }
.cuenta-cifras small { display: block; font-size: 12px; color: var(--tinta-tenue); }

/* Cuánto del total ya está cubierto */
.cuenta-barra {
  height: 10px;
  background: var(--borde);
  border-radius: 5px;
  overflow: hidden;
}
.cuenta-barra i { display: block; height: 100%; background: var(--ok); }

/* El total no es un campo: es el resultado de sumar los otros dos */
.total-calculado {
  display: block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  color: var(--tinta);
}

/* Un <details> que es tarjeta: el resumen hace de cabecera */
details.tarjeta > summary { list-style: none; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--tinta-tenue);
  font-size: 12px;
}
details.tarjeta[open] > summary::after { content: "▴"; }

/* ---------- Asistencia de una persona ---------- */

/* La tabla `datos` no tenia como marcar un fin de semana; la `rejilla`
   si. Aqui hace falta porque en obra se trabaja sabado y conviene
   distinguirlo de un lunes de un vistazo. */
.datos tr.finde td { background: #f4f6f8; }

/* ---------- Residentes de una obra ---------- */

/* Fila: el desplegable ocupa lo que puede y la "x" se queda a su lado.
   `min-width:0` es lo que impide que el select desborde la fila cuando
   un nombre largo lo estira. */
.fila-residente {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fila-residente > select,
.fila-residente > .buscable { flex: 1 1 auto; min-width: 0; }
.fila-residente > .boton-mini { flex: 0 0 auto; }

/* ---------- Leads / propuestas: el embudo por columnas ---------- */

/* Cuatro columnas, una por etapa. En angosto se apilan: el orden en el
   HTML ya va contactado → cotizado → ganado → perdido, así que apilado
   sigue leyéndose como un embudo de arriba a abajo. */
.embudo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .embudo { grid-template-columns: 1fr; }
}

.columna-etapa__cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2px solid var(--marca);
  margin-bottom: 10px;
}
.columna-etapa__cabecera .conteo {
  margin-left: auto;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--tinta-suave);
  font-weight: 400;
  font-size: 13px;
}

.lead-tarjeta {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--sol-tenue);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
}
.lead-tarjeta:hover { border-left-color: var(--sol); }
.lead-tarjeta--propuesta { border-left-color: var(--ojo); }
.lead-tarjeta--ganado { border-left-color: var(--ok); }
.lead-tarjeta--perdido { border-left-color: var(--mal); opacity: .75; }
.lead-tarjeta h4 { margin: 0 0 4px; font-size: 15px; }
.lead-tarjeta p { margin: 0; font-size: 13px; color: var(--tinta-suave); }
.lead-tarjeta .fecha { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.columna-etapa__vacio {
  padding: 14px;
  text-align: center;
  color: var(--tinta-tenue);
  font-size: 13px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
}

/* ---------- Ficha de un lead: ubicación con mapa ---------- */

.mapa-envoltorio {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
/* Selector por prefijo, no por id exacto: la ubicación beneficiada usa
   "mapa-lead-beneficiada", que #mapa-lead solo (id exacto) no alcanza a
   pintar — el mapa se inicializaba igual, pero con el contenedor en
   altura 0, invisible. */
[id^="mapa-lead"] { height: 320px; width: 100%; background: var(--papel); }

.mapa-aviso {
  font-size: 13px;
  color: var(--tinta-suave);
  margin: 8px 0 0;
}

/* ---------- Bitácora: visitas y proformas intercaladas por fecha ---------- */

.bitacora__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}
.bitacora__item:last-child { border-bottom: none; }
.bitacora__marca {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--marca-clara);
}
.bitacora__marca--visita { background: var(--marca-clara); }
.bitacora__marca--proforma { background: var(--ok-piel); }
.bitacora__cuerpo { flex: 1 1 auto; min-width: 0; }
.bitacora__titulo { font-weight: 600; font-size: 14px; margin: 0 0 2px; }
.bitacora__fecha { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--tinta-tenue); }
.bitacora__notas { margin: 4px 0 0; font-size: 13.5px; color: var(--tinta-suave); }
.bitacora__vacio { padding: 18px; text-align: center; color: var(--tinta-tenue); font-size: 13.5px; }

/* ---------- Contacto y dueño de una propiedad (lead) ---------- */

/* <details> nativo: sin JS, un clic en la fila abre el formulario de
   edición debajo. */
.persona-fila {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 6px;
  background: var(--superficie);
}
.persona-fila summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
}
.persona-fila summary::-webkit-details-marker { display: none; }
.persona-fila__editar {
  margin-left: auto;
  font-size: 12px;
  color: var(--marca);
  text-decoration: underline;
  text-decoration-color: var(--sol);
}
.persona-fila__form { padding: 4px 10px 12px; border-top: 1px solid var(--borde); }

/* ---------- Agregar a la bitácora: dos cajas bien separadas ---------- */

/* Antes eran dos columnas de un mismo grid, sin ninguna frontera entre
   ellas — se leían como un solo formulario. Ahora cada una es su propia
   caja, con el mismo color de marca que su tipo de entrada en la
   bitácora (el círculo con el icono), para que la relación se vea sola. */
.agregar-bitacora {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}
.agregar-bitacora__caja {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 14px;
}
.agregar-bitacora__caja--visita { background: color-mix(in srgb, var(--marca-clara) 45%, var(--superficie)); }
.agregar-bitacora__caja--proforma { background: color-mix(in srgb, var(--ok-piel) 45%, var(--superficie)); }
.agregar-bitacora__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.agregar-bitacora__titulo .bitacora__marca { width: 28px; height: 28px; font-size: 13px; }

/* ---------- La pregunta de "+ Nuevo": lead o subcontrato ---------- */

.opciones-nuevo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 760px;
}
.opcion-nueva {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
}
.opcion-nueva:hover { border-color: var(--marca); transform: translateY(-1px); }
.opcion-nueva__icono { font-size: 30px; display: block; margin-bottom: 10px; }
.opcion-nueva strong { display: block; font-family: Arial, sans-serif; font-size: 17px; margin-bottom: 8px; }
.opcion-nueva p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.5; }

/* Salida de escape: deliberadamente mas apagada que las dos tarjetas de
   arriba — es la excepcion, no una tercera opcion de igual peso. */
.caja-escape {
  max-width: 760px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: transparent;
}
.caja-escape strong { display: block; font-size: 14px; margin-bottom: 6px; }
.caja-escape p { margin: 0 0 12px; color: var(--tinta-suave); font-size: 13px; line-height: 1.5; }

/* Marca de "esto lo pidio un EPC", en el listado y en la ficha. */
.etiqueta-epc {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--marca-suave, #eef2f7);
  color: var(--tinta-suave);
  font-size: 11.5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- "Este documento no aplica a esta obra" ---------- */

.documento__acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Plegado a proposito: la salida normal es subir el archivo. Esto es la
   excepcion y no debe competir con el boton de subir. */
.no-aplica { font-size: 12px; }
.no-aplica > summary {
  cursor: pointer;
  color: var(--tinta-suave);
  list-style: none;
  text-align: right;
}
.no-aplica > summary::-webkit-details-marker { display: none; }
.no-aplica > summary:hover { color: var(--tinta); text-decoration: underline; }
.no-aplica[open] > summary { margin-bottom: 6px; }
.no-aplica form { display: flex; gap: 6px; align-items: center; }
.no-aplica input[type="text"] { width: 230px; font-size: 12.5px; }

/* ---------- Enlace a WhatsApp ---------- */

/* Verde de marca de WhatsApp. No es un color de estado de la app: aqui
   significa "esta app", igual que un logo. */
.wsp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1da851;
  text-decoration: none;
  vertical-align: middle;
}
.wsp svg { width: 17px; height: 17px; display: block; }
.wsp:hover { color: #128c3e; }
.wsp span { font-size: 13px; font-weight: 600; }

/* ---------- "Agregar otro contacto de emergencia" ---------- */

/* Plegado cuando ya hay uno: sumar un segundo es la excepcion. Abierto
   cuando no hay ninguno, porque ahi es lo que falta y esconderlo seria
   esconder el hueco. */
.agregar-contacto > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--marca);
  background: var(--marca-clara);
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  padding: 7px 14px;
  list-style: none;
}
.agregar-contacto > summary::-webkit-details-marker { display: none; }
.agregar-contacto > summary:hover { background: var(--sol-tenue); }
.agregar-contacto[open] > summary { background: transparent; border-style: dashed; }

/* ---------- Encabezado de tabla que ordena ---------- */

/* Se ve como texto de encabezado, no como enlace: el subrayado ambar de
   los enlaces normales gritaria demasiado repetido en cada columna. */
.ordenar {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ordenar:hover { text-decoration: underline; text-decoration-color: var(--sol); }

/* ---------- Proforma calculada ---------- */

/* Los doce meses en una rejilla apretada: son doce numeritos, no doce
   campos largos. Seis por fila en pantalla ancha, se van apilando. */
.rejilla-kwh {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px 12px;
}
.rejilla-kwh label { font-size: 12px; }

/* Tablas de numeros: alineadas a la derecha y con cifras tabulares,
   para que las columnas de dolares se lean como columnas. */
table.datos.tabla-num td, table.datos.tabla-num th { text-align: right; font-variant-numeric: tabular-nums; }
table.datos.tabla-num td:first-child, table.datos.tabla-num th:first-child { text-align: left; }

/* La propuesta editable: los campos van dentro de las celdas y no
   deben verse como un formulario aparte. */
.tabla-items textarea,
.tabla-items input[type="text"],
.tabla-items input[type="number"] {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--superficie);
}
.tabla-items textarea { resize: vertical; line-height: 1.4; }
.tabla-items td { vertical-align: top; }

/* Un <details> que se ve como tarjeta: el summary hace de cabecera. */
details.tarjeta > summary { list-style: none; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::after { content: '▾'; color: var(--tinta-tenue); }
details.tarjeta[open] > summary::after { content: '▴'; }

/* =====================================================================
   Pantallas chicas: la página se adapta sola (laptop angosta, tablet,
   celular). Las rejillas pasan a una columna, los campos con
   "grid-column:span 2" dejan de pedir dos columnas (en una sola rejilla
   creaban una columna fantasma que desbordaba), las tablas anchas se
   desplazan dentro de su tarjeta en vez de empujar la página, y nada
   fijo (imágenes, SVG, desplegables con ancho puesto) supera el ancho.
   ===================================================================== */
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }

@media (max-width: 1100px) {
  .envoltorio { padding: 16px; }
}

@media (max-width: 760px) {
  .envoltorio { padding: 10px; }
  .titulo-pagina { font-size: 19px; }
  .barra nav a { padding: 10px 9px 8px; font-size: 13px; }
  .barra__marca img { height: 24px; }
  .rejilla-campos { grid-template-columns: 1fr; gap: 12px; }
  .rejilla-campos > [style*="grid-column:span"],
  .rejilla-campos > [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  .rejilla-kwh { grid-template-columns: repeat(3, 1fr) !important; }
  .tarjeta__cabecera { flex-wrap: wrap; gap: 6px; }
  /* Las tablas anchas se desplazan dentro de la tarjeta, no empujan la página. */
  .tarjeta__cuerpo { padding: 12px; overflow-x: auto; }
  .tabla-items { min-width: 640px; }
  .mosaico { grid-template-columns: 1fr; }
  .no-aplica input[type="text"] { width: 100%; }
  #linea-catalogo, .js-buscable { min-width: 0 !important; width: 100%; }
  /* Los botones NO parten su texto en dos líneas: en una fila apretada
     («+ Persona» «Quitar obra») las palabras se montaban una sobre otra.
     Lo que se acomoda es la fila (flex-wrap), no el botón. */
  .boton { white-space: nowrap; }
  .tarjeta__cabecera > form { display: flex; flex-wrap: wrap; gap: 6px; }
  .documento-listado, .bitacora { overflow-x: auto; }
}

@media (max-width: 480px) {
  .rejilla-kwh { grid-template-columns: repeat(2, 1fr) !important; }
  .barra nav a { padding: 8px 7px 6px; font-size: 12.5px; }
}

.barra__contador {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: var(--sol); color: #0a090b; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; vertical-align: 1px;
}

/* Las secciones de la proforma simple: el texto ocupa todo el ancho de su caja. */
.js-seccion > textarea { display: block; width: 100%; }
.js-seccion > summary input[type="text"] { min-width: 0; }