@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  --fondo: #0F1A20;
  --panel: #16242C;
  --panel-alto: #1C2E38;
  --linea: #263B45;
  --texto: #E6EDEF;
  --tenue: #87A0AB;
  --ambar: #E8A317;
  --jade: #3FB68B;
  --coral: #E4635A;
  --hielo: #6FA8DC;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --cuerpo: 'Inter', system-ui, sans-serif;
  --r: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------ tipografia de manifiesto */
.rotulo {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.folio {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tenue);
}

/* --------------------------------------------------------------- cabecera */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
}

.marca {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.marca span { color: var(--ambar); }

.pulso {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  transition: background .3s;
}

.punto.vivo { background: var(--jade); box-shadow: 0 0 0 0 rgba(63,182,139,.55); animation: latir 2.4s infinite; }

@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(63,182,139,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63,182,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,182,139,0); }
}

/* ---------------------------------------------------------------- paneles */
.seccion {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.seccion > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel-alto);
}

.cuenta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--fondo);
  background: var(--ambar);
  padding: 1px 6px;
  border-radius: 2px;
}

.cuenta.cero { background: var(--linea); color: var(--tenue); }

.lista {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* --------------------------------------------------- fila tipo manifiesto */
.fila {
  position: relative;
  display: block;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--linea);
  animation: entrar .28s ease-out;
}

.fila::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--linea);
}

.fila[data-estado="pendiente"]::before,
.fila[data-estado="programado"]::before { background: var(--ambar); }
.fila[data-estado="en_proceso"]::before,
.fila[data-estado="en_ruta"]::before     { background: var(--hielo); }
.fila[data-estado="completada"]::before,
.fila[data-estado="despachado"]::before  { background: var(--jade); }
.fila[data-estado="cancelado"]::before   { background: var(--coral); }
.fila[data-prioridad="alta"]::before     { background: var(--coral); }

.fila:hover { background: rgba(255,255,255,.025); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.fila .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.fila .titulo { font-weight: 500; }
.fila.hecha .titulo { color: var(--tenue); text-decoration: line-through; }
.fila .detalle { color: var(--tenue); font-size: 13px; margin-top: 2px; }

.quien {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid currentColor;
  opacity: .9;
}

/* ---------------------------------------------------------------- controles */
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.btn {
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 6px 11px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color .15s, color .15s;
}

.btn:hover { border-color: var(--ambar); color: var(--ambar); }
.btn.principal { background: var(--ambar); color: #14212A; border-color: var(--ambar); }
.btn.principal:hover { filter: brightness(1.08); color: #14212A; }
.btn.fino { padding: 3px 8px; }

.btn.campana { padding: 4px 8px; font-size: 12px; letter-spacing: 0; }
.btn.campana[data-estado="activado"] { border-color: var(--jade); color: var(--jade); }
.btn.campana[data-estado="bloqueado"] { border-color: var(--coral); color: var(--coral); }

.campo, textarea.campo, select.campo {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 8px 10px;
  outline: none;
  transition: border-color .15s;
}

.campo:focus { border-color: var(--ambar); }
.campo::placeholder { color: var(--tenue); opacity: .7; }
textarea.campo { resize: vertical; min-height: 60px; }

:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }

.vacio {
  padding: 22px 16px;
  text-align: center;
  color: var(--tenue);
  font-size: 13px;
}

/* ----------------------------------------------------------------- dialogos */
dialog {
  /* El reset de arriba borra el margin:auto que centra los dialogos. */
  margin: auto;
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 16px;
  width: min(320px, 92vw);
}

dialog::backdrop { background: rgba(8,14,18,.72); }
.campos { display: grid; gap: 8px; margin: 12px 0; }
.campos[hidden] { display: none; }

/* Campo de fecha con la casilla "Hoy" al lado. */
.con-hoy { display: flex; align-items: center; gap: 8px; }
.con-hoy .campo { flex: 1; }
.con-hoy label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.con-hoy input[type="checkbox"] { accent-color: var(--ambar); cursor: pointer; }
.con-hoy .campo:disabled { opacity: .55; }
.campo[aria-invalid="true"] { border-color: var(--coral); }

/* Listas hechas en la pagina (listas.js): reemplazan a los <select> del
   widget, que no se despliegan con la barra en segundo plano. */
/* Sin esto un texto largo ("Instituto Guatemalteco...") ensancha el dialogo. */
.desplegable { min-width: 0; }
.desplegable-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.desplegable-boton::after { content: '▾'; color: var(--tenue); flex: none; }
.desplegable-boton[aria-expanded="true"] { border-color: var(--ambar); }
.desplegable-boton:disabled { opacity: .55; cursor: default; }
.desplegable-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desplegable-texto.vacia { color: var(--tenue); }

.desplegable-opciones {
  position: fixed;
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  padding: 4px 0;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(8,14,18,.5);
}
.desplegable-opciones li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.desplegable-opciones li[data-activa] { background: var(--linea); }
.desplegable-opciones li[aria-selected="true"] { color: var(--ambar); }
.desplegable-opciones li[aria-disabled="true"] { opacity: .5; cursor: default; }
/* Con seleccion multiple cada opcion lleva su casilla. */
.desplegable-opciones[aria-multiselectable="true"] li::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--tenue);
  border-radius: 2px;
}
.desplegable-opciones[aria-multiselectable="true"] li[aria-selected="true"]::before {
  background: var(--ambar);
  border-color: var(--ambar);
}

/* Barra pegajosa arriba de una lista: anotarse una tarea, buscar despachos. */
.rapido {
  padding: 8px 10px; background: var(--panel-alto);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 2;
}
.rapido.fila-campo { display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- ingreso */
/* Sin sesion lo unico que se ve es la pantalla de entrada: ni la app atras ni
   la cabecera. El aviso flotante si, que ahi salen los errores. */
body.sin-sesion > :not(.ingreso):not(.aviso) { display: none; }
.ingreso { display: none; }
body.sin-sesion .ingreso {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.ingreso-caja {
  width: min(320px, 100%);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 18px 16px;
}
.ingreso-caja .marca { margin-bottom: 16px; }
.ingreso-caja form[hidden], .ingreso-caja .campo[hidden] { display: none; }
.ingreso-caja .detalle { color: var(--tenue); font-size: 13px; margin-top: 6px; }
.ingreso-error { color: var(--coral); font-size: 13px; }
.ingreso-error[hidden], .ingreso-estado[hidden] { display: none; }
.ingreso-acciones { display: flex; gap: 6px; }
.ingreso-acciones .btn { flex: 1; }
.ingreso-caja .btn:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------- pestañas del celular */
/* Barra de abajo del tablero en el telefono. Solo aparece en la media query
   de celular de index.html; en la compu y en el widget no existe. */
.pestanas-movil { display: none; }
.pestana-movil {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  color: var(--tenue);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.pestana-movil[hidden] { display: none; }
.pestana-movil .icono { font-size: 17px; line-height: 1; letter-spacing: 0; position: relative; }
.pestana-movil[aria-selected="true"] { color: var(--ambar); border-top-color: var(--ambar); }
.pestana-movil .globo-movil {
  position: absolute;
  top: -5px;
  left: 13px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}
.pestana-movil .globo-movil[hidden] { display: none; }

/* Pasos para instalarla en el telefono (dialogo del tablero). */
.pasos { margin: 10px 0 14px 18px; display: grid; gap: 6px; font-size: 14px; }
.pasos b { color: var(--ambar); font-weight: 600; }

/* -------------------------------------------------------- aviso de rechazo */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(420px, 90vw);
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--coral);
  border-radius: var(--r);
  padding: 9px 13px;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  animation: entrar .2s ease-out;
}

.aviso[hidden] { display: none; }

/* -------------------------------------------------------------------- chat */
.burbuja { padding: 8px 14px; border-bottom: 1px solid transparent; }
.burbuja + .burbuja { margin-top: -2px; }
.burbuja .cabeza { display: flex; align-items: baseline; gap: 8px; }
.burbuja .cabeza .btn { margin-left: auto; opacity: 0; transition: opacity .15s; }
.burbuja:hover .cabeza .btn,
.burbuja .cabeza .btn:focus-visible { opacity: 1; }
.burbuja .autor { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.burbuja .texto { white-space: pre-wrap; word-break: break-word; }

.redactar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--linea);
  background: var(--panel-alto);
}

/* --------------------------------------------------------------- scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #35505c; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- reportes */
.reporte { padding: 14px; display: grid; gap: 18px; }
.reporte-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.reporte-cifra {
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 12px 14px;
}
.reporte-cifra b {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.reporte-cifra.coral b { color: var(--coral); }
.reporte-cifra .detalle { color: var(--tenue); font-size: 12px; }
.reporte-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }

.tabla-reporte { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-reporte caption { text-align: left; padding-bottom: 6px; }
.tabla-reporte th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: 6px 8px;
  border-bottom: 1px solid var(--linea);
}
.tabla-reporte td { padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla-reporte .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla-reporte .vencidas { color: var(--coral); }
.tabla-reporte .nota { color: var(--tenue); font-size: 12px; padding-top: 6px; }
.marca-color { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }

.grafico-dias { position: relative; }
.grafico-dias svg { display: block; width: 100%; height: 170px; overflow: visible; }
.grafico-dias .barra { fill: var(--ambar); }
.grafico-dias .barra.activa { opacity: .75; }
.grafico-dias .zona { fill: transparent; cursor: default; }
.grafico-dias .guia { stroke: var(--linea); stroke-width: 1; }
.grafico-dias text { fill: var(--tenue); font-family: var(--mono); font-size: 10px; }
.grafico-dias .globo-grafico {
  position: absolute;
  pointer-events: none;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
  transform: translate(-50%, -100%);
}
.grafico-dias .globo-grafico[hidden] { display: none; }
.grafico-dias details { margin-top: 8px; }
.grafico-dias summary { cursor: pointer; color: var(--tenue); font-size: 12px; }