/* Tablero de SaaS. Dos pantallas muy distintas: un televisor a tres metros y
   una notebook. En la tele manda el tamaño del número; en la notebook, poder
   leer el detalle. Y dos temas, porque la tele queda mejor oscura y de día la
   notebook queda mejor clara. */

:root {
  --fondo: #0d1117;
  --caja: #161b22;
  --borde: #262d38;
  --texto: #e6edf3;
  --suave: #8b98a5;
  --tenue: #4a5563;
  --verde: #3fb950;
  --ambar: #d29922;
  --rojo: #f85149;
  --azul: #58a6ff;
  --sombra: none;
}

:root[data-tema="claro"] {
  --fondo: #f3f5f9;
  --caja: #ffffff;
  --borde: #e2e6ee;
  --texto: #1b2430;
  --suave: #6b7686;
  --tenue: #aab2bf;
  --verde: #16a34a;
  --ambar: #c2820b;
  --rojo: #dc2626;
  --azul: #2563eb;
  --sombra: 0 1px 3px rgba(20, 30, 50, .07), 0 6px 18px rgba(20, 30, 50, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; border-bottom: 1px solid var(--borde);
  background: var(--caja);
}
header h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
header h1 a { color: inherit; text-decoration: none; }
header nav { display: flex; gap: 14px; }
header nav a {
  color: var(--suave); text-decoration: none; font-size: 14px;
  padding: 4px 2px; border-bottom: 2px solid transparent;
}
header nav a:hover { color: var(--texto); border-bottom-color: var(--azul); }
.cabecera-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.reloj { color: var(--suave); font-variant-numeric: tabular-nums; }

.boton {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--borde);
  border-radius: 6px; background: var(--caja); color: var(--texto);
  text-decoration: none; font-size: 13px; cursor: pointer; font-family: inherit;
}
.boton:hover { border-color: var(--azul); }
.boton.grande { width: 100%; padding: 10px; font-size: 15px; }
.boton.principal { background: var(--verde); border-color: var(--verde); color: #06130a; font-weight: 600; }
:root[data-tema="claro"] .boton.principal { color: #fff; }
.boton.principal:hover { filter: brightness(1.08); }
.boton.listo { border-color: var(--verde); color: var(--verde); }

.contenido { padding: 20px; max-width: 980px; }
.titulo-pagina { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; }
.punto-grande { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rojo { color: var(--rojo); }

/* ----------------------------------------------------- franja de totales */

.resumen {
  display: grid; gap: 12px; padding: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tarjeta-numero {
  background: var(--caja); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--sombra);
}
.tarjeta-numero.ojo { border-color: var(--ambar); }
.tarjeta-numero.mal { border-color: var(--rojo); }
.rotulo { font-size: 10.5px; letter-spacing: .9px; color: var(--suave); }
.numero { font-size: 34px; font-weight: 700; line-height: 1.1;
          font-variant-numeric: tabular-nums; }
.numero.chico { font-size: 20px; }
.pie { font-size: 11.5px; color: var(--suave); }
.pie.faltantes { color: var(--ambar); }

/* ---------------------------------------------------- cuerpo en dos alas */

main {
  display: grid; gap: 16px; padding: 0 20px 20px;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.productos {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* El color es del producto, no del estado: entra por --color desde la plantilla.
   El estado se dice con el punto y con el borde, que son otra cosa. */
.tarjeta {
  --color: var(--suave);
  position: relative; overflow: hidden;
  background: var(--caja); border: 1px solid var(--borde);
  border-radius: 12px; padding: 16px 14px 14px; box-shadow: var(--sombra);
}
.tarjeta .franja {
  position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--color);
}
.tarjeta h2 {
  margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px;
}
.tarjeta h2 .cuando { margin-left: auto; font-size: 11.5px; color: var(--suave); font-weight: 400; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--color); flex: none; }

.estado-aviso    { border-color: var(--ambar); }
.estado-alarma   { border-color: var(--rojo); }
.estado-alarma   .punto, .estado-sin_datos .punto { background: var(--tenue); }

.alerta {
  margin: 0 0 10px; padding: 7px 9px; border-radius: 6px; font-size: 12px;
  background: rgba(248, 81, 73, .12); color: var(--rojo);
}

.aviso {
  margin: 0 0 10px; padding: 9px 11px; border-radius: 6px; font-size: 12.5px;
  background: rgba(88, 166, 255, .10); color: var(--azul);
}

.plata { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.plata strong { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--color); }
.plata .moneda { font-size: 11px; color: var(--suave); }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.rejilla > div { display: flex; flex-direction: column; }
.rejilla b { font-size: 19px; font-variant-numeric: tabular-nums; }

.raya { color: var(--tenue); }
.delta { font-size: 11px; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--rojo); }

.demos { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 10px; }
.demos ul { list-style: none; margin: 6px 0 0; padding: 0; }
.demos li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
.dias {
  font-variant-numeric: tabular-nums; font-size: 11px; padding: 1px 6px;
  border-radius: 20px; background: rgba(210, 153, 34, .18); color: var(--ambar); flex: none;
}
.dias.ya { background: rgba(248, 81, 73, .18); color: var(--rojo); }

/* -------------------------------------------------------------- novedades */

.novedades {
  background: var(--caja); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px; box-shadow: var(--sombra);
}
.novedades h2 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.globo {
  background: var(--azul); color: #fff; border-radius: 20px;
  padding: 0 7px; font-size: 12px; font-weight: 700;
}
.feed { list-style: none; margin: 10px 0 0; padding: 0; }
.feed li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--borde);
  font-size: 13px;
}
.feed li:first-child { border-top: 0; }
.feed .etiqueta {
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--suave); grid-column: 1;
}
.feed .producto { font-weight: 600; grid-column: 2; }
.feed .cuando { grid-column: 3; color: var(--suave); font-size: 11px;
                font-variant-numeric: tabular-nums; }
.feed .titulo { grid-column: 2 / 4; }
.feed .detalle { grid-column: 2 / 4; color: var(--suave); font-size: 12px; }
.feed li.sin-ver { background: rgba(88, 166, 255, .07); }
.feed li.sin-ver .etiqueta { color: var(--azul); }
.feed li.tipo-demo_por_vencer .etiqueta, .feed li.tipo-demo_vencido .etiqueta { color: var(--ambar); }
.feed li.tipo-error .etiqueta, .feed li.tipo-baja .etiqueta { color: var(--rojo); }
.raro { color: var(--ambar); }

.vacio { color: var(--suave); font-size: 13px; }
.vacio a { color: var(--azul); }

footer {
  display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 20px;
  border-top: 1px solid var(--borde); color: var(--suave); font-size: 11.5px;
}

/* ------------------------------------------------- páginas de administración */

.caja-ancha {
  background: var(--caja); border: 1px solid var(--borde); border-radius: 12px;
  padding: 16px; margin: 16px 0; box-shadow: var(--sombra);
}
.caja-ancha.destacada { border-color: var(--verde); }
.caja-ancha h3 { margin: 0 0 10px; font-size: 15px; }
.fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.lista-productos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fila-producto {
  display: grid; grid-template-columns: 6px 1fr auto auto auto; gap: 12px;
  align-items: center; padding: 10px 14px 10px 0; text-decoration: none;
  color: var(--texto); background: var(--caja); border: 1px solid var(--borde);
  border-radius: 10px; overflow: hidden; box-shadow: var(--sombra);
}
.fila-producto:hover { border-color: var(--azul); }
.fila-producto .tira { align-self: stretch; }
.fila-producto .nombre { font-weight: 600; }
.clave {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px;
  color: var(--suave); background: var(--fondo); padding: 2px 7px; border-radius: 5px;
}
.chip { font-size: 11px; padding: 2px 9px; border-radius: 20px; background: var(--fondo); color: var(--suave); }
.chip-sano { color: var(--verde); }
.chip-aviso { color: var(--ambar); }
.chip-alarma { color: var(--rojo); }

.formulario-linea { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.formulario-linea label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.formulario-linea input, .formulario-linea select, .copiable input {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto); font-size: 14px; font-family: inherit;
}
.formulario-linea input:focus, .copiable input:focus { outline: none; border-color: var(--azul); }

.copiable { display: flex; gap: 8px; margin: 8px 0; }
.copiable input {
  flex: 1; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px;
}

.prompt {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; line-height: 1.5; resize: vertical;
}

.colores { display: flex; flex-wrap: wrap; gap: 8px; }
.muestra {
  width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.muestra.elegido { border-color: var(--texto); }

.acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.acciones form, .acciones > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------ la tele */
/* A tres metros no se lee nada de 12 px. Lo accesorio desaparece y los
   números crecen. */

body.tele { font-size: 19px; }
body.tele header h1 { font-size: 30px; }
body.tele .numero { font-size: 56px; }
body.tele .rotulo { font-size: 13px; }
body.tele .pie { font-size: 14px; }
body.tele .tarjeta h2 { font-size: 22px; }
body.tele .tarjeta .franja { height: 7px; }
body.tele .plata strong { font-size: 38px; }
body.tele .rejilla b { font-size: 27px; }
body.tele .feed li { font-size: 17px; }
body.tele footer { display: none; }
body.tele main { grid-template-columns: minmax(0, 1fr) 460px; }

/* ------------------------------------------------------------- pantallita */

@media (max-width: 900px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .productos { grid-template-columns: minmax(0, 1fr); }
  header { flex-wrap: wrap; gap: 10px; }
  .fila-producto { grid-template-columns: 6px 1fr auto; }
  .fila-producto .pie { display: none; }
}

/* --------------------------------------------------------------- entrar */

body.centrado { display: grid; place-items: center; min-height: 100vh; }
.caja {
  background: var(--caja); border: 1px solid var(--borde); border-radius: 12px;
  padding: 24px; width: 340px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sombra);
}
.caja h1 { margin: 0; font-size: 19px; }
.caja label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--suave); }
.caja input {
  padding: 9px 10px; border-radius: 6px; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto); font-size: 15px;
}
.caja input:focus { outline: none; border-color: var(--azul); }
.caja .pie { color: var(--suave); text-decoration: none; }
.caja a.pie:hover { color: var(--azul); }

/* Desglose de planes dentro de la tarjeta: es el detalle que contesta
   "¿de dónde sale ese MRR?" sin tener que ir a ningún lado. */
.planes { width: 100%; border-collapse: collapse; margin: 2px 0 10px; font-size: 12.5px; }
.planes td { padding: 3px 0; border-bottom: 1px solid var(--borde); }
.planes tr:last-child td { border-bottom: 0; }
.planes .nombre { color: var(--suave); }
.planes .cuenta { text-align: right; color: var(--suave); padding-right: 6px;
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.planes .precio { text-align: right; color: var(--suave);
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.planes .sub { text-align: right; font-weight: 600; padding-left: 10px;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.planes .resto .nombre { font-style: italic; }

.marca {
  font-size: 10px; letter-spacing: .4px; padding: 1px 7px; border-radius: 20px;
  background: rgba(88, 166, 255, .14); color: var(--azul); white-space: nowrap;
}

body.tele .planes { font-size: 16px; }
body.tele .marca { font-size: 13px; }