/* =========================================================================
   PANEL BELLORA — la herramienta de Juan  [OLA 57]
   -------------------------------------------------------------------------
   Mismo vocabulario de fichas que bellora.css (--tinta, --fondo, --acento,
   --linea…) para que Juan no cambie de mundo al pasar de un salón al panel,
   pero en un archivo propio: el panel es otra aplicación, con otro puerto y
   otra base, y no debe depender de la hoja de un salón.

   Ámbar = «atienda esto» (vence pronto, en cortesía). Rojo = ya se pausó
   (vencida, suspendida). Verde = al día. Lo informativo va en neutro.
   ========================================================================= */

:root {
  --tinta:        #2b2430;
  --tinta-suave:  #6b6270;
  --linea:        #e6e1ea;
  --linea-fuerte: #d6cfdc;
  --fondo:        #f7f5f9;
  --papel:        #ffffff;
  --realce:       #faf8fb;
  --rayado:       #f0edf3;
  --acento:       #7c3f6a;
  --acento-osc:   #5f2f51;
  --acento-luz:   #f3e8f0;
  --sobre-acento: #ffffff;
  --verde:        #2f7d5c;
  --verde-luz:    #edf8f2;
  --ambar:        #8a5610;
  --ambar-luz:    #fbf0dd;
  --ambar-linea:  #ecd9b4;
  --rojo:         #b3352f;
  --rojo-luz:     #fdecea;
  --rojo-linea:   #eccbc9;
  --radio:        10px;
  --sombra:       0 1px 2px rgba(43,36,48,.06), 0 8px 24px rgba(43,36,48,.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
  color: var(--tinta); background: var(--fondo);
  padding-inline: 16px;
}
h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); margin-bottom: 8px; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --- la puerta -------------------------------------------------------- */
.entrada { min-height: 100vh; display: grid; place-items: center; }
.tarjetaEntrar {
  width: min(360px, 100%); background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 28px 24px; box-shadow: var(--sombra);
  display: grid; gap: 10px;
}
.marca { font-weight: 700; letter-spacing: .18em; color: var(--acento); font-size: 20px; }
.marca.chica { font-size: 15px; }
.marcaSub { color: var(--tinta-suave); margin-bottom: 8px; }
.tarjetaEntrar label { font-size: 13px; color: var(--tinta-suave); }

/* --- controles --------------------------------------------------------- */
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--linea-fuerte);
  border-radius: 8px; background: var(--papel);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-suave); margin-bottom: 10px; }
label > input, label > select, label > textarea { color: var(--tinta); font-size: 15px; }
label.casilla { grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: var(--tinta); }
label.casilla input { width: auto; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pista { color: var(--tinta-suave); font-size: 12px; }
textarea { resize: vertical; }

.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linea-fuerte);
  background: var(--papel); cursor: pointer; text-decoration: none; color: var(--tinta);
  white-space: nowrap;
}
.boton:hover { background: var(--realce); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton.principal:hover { background: var(--acento-osc); }
.boton.suave { border-color: transparent; background: transparent; color: var(--tinta-suave); }
.boton.peligro { color: var(--rojo); border-color: var(--rojo-linea); }
.boton.peligro:hover { background: var(--rojo-luz); }
.boton:disabled { opacity: .55; cursor: default; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; text-decoration: underline; font-size: 13px; }
.cuenta {
  display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--rayado); color: var(--tinta-suave); font-size: 12px; text-align: center; font-weight: 600;
}
.cuenta.atender { background: var(--ambar-luz); color: var(--ambar); }

/* --- cabecera y bloques ------------------------------------------------ */
.cabecera {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 18px;
}
.cabeceraMarca { display: flex; align-items: baseline; gap: 12px; }
.cabeceraTitulo { font-size: 20px; font-weight: 600; }
.cabeceraAcciones { display: flex; flex-wrap: wrap; gap: 8px; }
.bloque { margin-bottom: 26px; }
.bloqueTitulo { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bloqueNota { color: var(--tinta-suave); font-size: 13px; margin: 0 0 10px; }
.avisoFallo, .fallo { color: var(--rojo); background: var(--rojo-luz); border: 1px solid var(--rojo-linea); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 0 0 12px; }

/* --- las filas de clientes -------------------------------------------- */
.filas { display: grid; gap: 8px; }
.fila {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(150px, 1.2fr) auto;
  gap: 12px; align-items: center;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px;
  cursor: pointer;
}
.fila:hover { border-color: var(--linea-fuerte); background: var(--realce); }
.fila.pausada { border-left: 4px solid var(--rojo); }
.fila.atender { border-left: 4px solid var(--ambar); }
.filaNombre { font-weight: 600; }
.filaCodigo { color: var(--tinta-suave); font-size: 13px; }
.filaPlan { font-size: 14px; }
.filaPlan small { display: block; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.filaVence { font-size: 14px; font-variant-numeric: tabular-nums; }
.filaVence small { display: block; color: var(--tinta-suave); }
.filaAcciones { display: flex; gap: 6px; justify-self: end; }
.filaAcciones .boton { padding: 5px 10px; font-size: 13px; }
@media (max-width: 720px) {
  .fila { grid-template-columns: 1fr 1fr; }
  .filaAcciones { grid-column: 1 / -1; justify-self: start; }
}

/* el estado, con forma y no sólo con número */
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: var(--rayado); color: var(--tinta-suave); vertical-align: middle;
}
.chip.vigente    { background: var(--verde-luz); color: var(--verde); }
.chip.por_vencer { background: var(--ambar-luz); color: var(--ambar); }
.chip.gracia     { background: var(--ambar-luz); color: var(--ambar); }
.chip.vencida    { background: var(--rojo-luz);  color: var(--rojo); }
.chip.suspendida { background: var(--rojo-luz);  color: var(--rojo); }
.chip.pendiente  { background: var(--acento-luz); color: var(--acento); }
.chip.prueba     { background: var(--acento-luz); color: var(--acento); }
.chip.sinRespuesta { background: var(--rojo-luz); color: var(--rojo); }
.chip.compartida { background: var(--rayado); color: var(--tinta-suave); font-weight: 500; margin-left: 6px; }

/* --- diálogos ----------------------------------------------------------- */
.dialogo {
  border: 1px solid var(--linea); border-radius: 14px; padding: 0; box-shadow: var(--sombra);
  width: min(520px, calc(100vw - 32px)); background: var(--papel); color: var(--tinta);
}
.dialogo.ancho { width: min(860px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(43,36,48,.35); }
.dialogoCuerpo { padding: 18px 20px 20px; margin: 0; max-height: calc(100vh - 64px); overflow: auto; }
.dialogoCabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.dialogoTitulo { font-size: 19px; }
.dialogoSub { color: var(--tinta-suave); font-size: 13px; margin: 2px 0 12px; }
.cerrar { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0 4px; }
.dialogoPie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }

.detalleRejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 640px) { .detalleRejilla, .dos { grid-template-columns: 1fr; } }
.detalleTarjeta { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.detalleTarjeta.alerta { background: var(--ambar-luz); border-color: var(--ambar-linea); }
.detalleTarjeta.pausada { background: var(--rojo-luz); border-color: var(--rojo-linea); }
.pares { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 14px; }
.pares dt { color: var(--tinta-suave); }
.pares dd { margin: 0; overflow-wrap: anywhere; }
.licMonto { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uso { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-suave); margin-top: 6px; }
.uso .encima { color: var(--ambar); font-weight: 600; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabla td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla td:last-child { text-align: right; white-space: nowrap; }
.listaAvisos { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.listaAvisos li { padding: 4px 0; border-bottom: 1px solid var(--linea); }
.listaAvisos time { color: var(--tinta-suave); margin-right: 6px; }
.bitacora {
  font-family: Consolas, Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--rayado); border-radius: 8px; padding: 10px 12px; margin: 0; max-height: 320px; overflow: auto;
}
.plegable { margin: 6px 0 12px; }
.plegable summary { cursor: pointer; color: var(--tinta-suave); font-size: 13px; margin-bottom: 8px; }
.listaEditable { display: grid; gap: 6px; margin-bottom: 6px; }
.listaEditable .sede { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; }
.listaEditable .sede input { margin: 0; }
.listaEditable .quitar { border: 0; background: none; color: var(--tinta-suave); cursor: pointer; font-size: 18px; }

/* --- la cola de altas --------------------------------------------------- */
.alta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.altaCabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.altaCabecera .boton { padding: 5px 10px; font-size: 13px; }
.alta .chip.hecha { background: var(--verde-luz); color: var(--verde); }
.alta .chip.fallo { background: var(--rojo-luz); color: var(--rojo); }
.alta .chip.en_curso { background: var(--ambar-luz); color: var(--ambar); }

/* --- el globito ---------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #322a37; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  box-shadow: var(--sombra); max-width: calc(100vw - 32px); z-index: 20;
}
.toast.malo { background: var(--rojo); }

@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] { animation: aparecer .15s ease-out; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --- [OLA 58] la clave temporal: se ve UNA vez, y se borra a mano ------ */
.claveTemporal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--ambar-luz); border: 1px solid var(--ambar-linea); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin: 6px 0 8px;
}
.claveTemporal code { font-family: Consolas, Menlo, monospace; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.claveTemporal .boton { padding: 4px 10px; font-size: 13px; margin-left: auto; }
/* --- [OLA 61] los modulos extra --------------------------------------- */
.listaExtras { display: grid; gap: 6px; margin-bottom: 10px; }
.listaExtras .extra { display: grid; grid-template-columns: auto 1fr 130px; gap: 8px; align-items: center; font-size: 14px; }
.listaExtras .extra input[type=number] { margin: 0; padding: 5px 8px; }
.listaExtras .extra input[type=checkbox] { width: auto; }
.listaExtras .extra.vacia { color: var(--tinta-suave); font-size: 13px; grid-template-columns: 1fr; }
.alta.en_curso { border-left: 4px solid var(--ambar); }
.alta.fallo { border-left: 4px solid var(--rojo); }