/* YSN Plus — panel interno.
   Diseñado para leerse rápido en escritorio y operarse con el pulgar en la
   calle, que es donde de verdad se atienden los clientes. */

:root {
  --fondo: #0d1117;
  --fondo-2: #151b23;
  --fondo-3: #1c2430;
  --borde: #2a3441;
  --texto: #e6edf3;
  --texto-2: #9aa7b4;
  --acento: #ffb300;
  --acento-2: #ffc94d;
  --ok: #3fb950;
  --alerta: #d29922;
  --error: #f85149;
  --info: #58a6ff;
  --radio: 10px;
  --sombra: 0 2px 12px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f6f8fa;
    --fondo-2: #ffffff;
    --fondo-3: #eef2f6;
    --borde: #d6dee6;
    --texto: #1c2430;
    --texto-2: #5c6b7a;
    --sombra: 0 2px 10px rgba(20, 30, 45, .08);
  }
}

* { box-sizing: border-box; }

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

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barra superior --- */
.barra {
  display: flex;
  align-items: center;
  /* Con 9 secciones el menú se envuelve en pantallas medianas. El row-gap da
     aire entre las dos líneas; sin él quedaban pegadas y la barra se veía
     aplastada. */
  column-gap: 18px;
  row-gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  min-height: 62px;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  font-weight: 700;
  color: var(--acento);
  font-size: 17px;
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }

.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
.menu a {
  padding: 8px 11px;
  border-radius: var(--radio);
  color: var(--texto-2);
  font-size: 14px;
  white-space: nowrap;
}
.menu a:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.menu a.activo { background: var(--acento); color: #1a1200; font-weight: 600; }

.barra-fin { display: flex; gap: 8px; align-items: center; }

.buscador input {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 7px 12px;
  border-radius: var(--radio);
  width: 180px;
}

/* --- Estructura --- */
.contenido { max-width: 1400px; margin: 0 auto; padding: 22px 20px 60px; }

.encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.encabezado h1 { margin: 0 0 4px; font-size: 24px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.pie {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--borde);
  color: var(--texto-2);
  font-size: 13px;
  flex-wrap: wrap;
}

/* --- Avisos --- */
.aviso {
  padding: 11px 15px;
  border-radius: var(--radio);
  margin-bottom: 18px;
  border-left: 3px solid var(--ok);
  background: var(--fondo-2);
}
.aviso-error { border-left-color: var(--error); }
.aviso-aviso { border-left-color: var(--alerta); }

/* --- Tarjetas de métrica --- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.tarjeta {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--sombra);
}
.tarjeta-etiqueta { color: var(--texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.tarjeta-valor { font-size: 25px; font-weight: 700; line-height: 1.2; }
.tarjeta-detalle { color: var(--texto-2); font-size: 13px; }
.tono-ok .tarjeta-valor { color: var(--ok); }
.tono-alerta .tarjeta-valor { color: var(--alerta); }
.tono-error .tarjeta-valor { color: var(--error); }
.tono-acento .tarjeta-valor { color: var(--acento); }

/* --- Paneles --- */
.panel {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-3);
  flex-wrap: wrap;
}
.panel-cabeza h2 { margin: 0; font-size: 16px; }
.panel-cuerpo { padding: 16px; }

.columnas { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .columnas { grid-template-columns: 1fr; } }

/* --- Tablas --- */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { color: var(--texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--fondo-3); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-alerta { background: rgba(248, 81, 73, .07); }

/* --- Botones --- */
.boton {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-3);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.boton:hover { border-color: var(--acento); text-decoration: none; }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #1a1200; font-weight: 600; }
.boton.principal:hover { background: var(--acento-2); }
.boton.peligro { color: var(--error); }
.boton.peligro:hover { border-color: var(--error); background: rgba(248, 81, 73, .1); }
.boton.exito { color: var(--ok); }
.boton.exito:hover { border-color: var(--ok); background: rgba(63, 185, 80, .1); }
.boton.fantasma { background: transparent; }
.boton.pequeno { padding: 5px 10px; font-size: 13px; }
.en-linea { display: inline-block; }

/* --- Formularios --- */
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 9px 12px;
  border-radius: var(--radio);
  font: inherit;
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo .pista { font-size: 12px; color: var(--texto-2); }
.campo-check { flex-direction: row; align-items: center; gap: 9px; }
.campo-check input { width: auto; }
.campo-check label { color: var(--texto); font-weight: 500; }
.pie-formulario { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* --- Filtros --- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { min-width: 150px; }

/* --- Texto y etiquetas --- */
.sutil { color: var(--texto-2); font-size: 13px; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.grande { font-size: 21px; font-weight: 700; }

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  white-space: nowrap;
}
.etiqueta.ok { color: var(--ok); border-color: var(--ok); }
.etiqueta.alerta { color: var(--alerta); border-color: var(--alerta); }
.etiqueta.error { color: var(--error); border-color: var(--error); }
.etiqueta.info { color: var(--info); border-color: var(--info); }
.etiqueta.acento { color: var(--acento); border-color: var(--acento); }

.vacio { padding: 40px 20px; text-align: center; color: var(--texto-2); }

/* --- Bloque copiable (mensajes de WhatsApp) --- */
.copiable { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.copiable-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--fondo-3);
  border-bottom: 1px solid var(--borde);
}
.copiable-cuerpo {
  margin: 0;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  max-height: 420px;
  overflow-y: auto;
}

/* --- Barra de ocupación --- */
.barra { height: 7px; background: var(--fondo-3); border-radius: 999px; overflow: hidden; min-width: 70px; }
.barra-relleno { height: 100%; background: var(--acento); border-radius: 999px; }
.barra-0 { width: 0; }
.barra-5 { width: 5%; }
.barra-10 { width: 10%; }
.barra-15 { width: 15%; }
.barra-20 { width: 20%; }
.barra-25 { width: 25%; }
.barra-30 { width: 30%; }
.barra-35 { width: 35%; }
.barra-40 { width: 40%; }
.barra-45 { width: 45%; }
.barra-50 { width: 50%; }
.barra-55 { width: 55%; }
.barra-60 { width: 60%; }
.barra-65 { width: 65%; }
.barra-70 { width: 70%; }
.barra-75 { width: 75%; }
.barra-80 { width: 80%; }
.barra-85 { width: 85%; }
.barra-90 { width: 90%; }
.barra-95 { width: 95%; }
.barra-100 { width: 100%; background: var(--ok); }

/* --- Identidad de marca de cada servicio ---
   Los colores concretos llegan en /css/marcas.css, generado desde la base.
   Aquí solo está la forma; el color se toma de --marca. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--marca, var(--fondo-3));
  color: var(--marca-texto, var(--texto));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1.5;
  /* Sobre marcas casi negras el chip se fundiría con el tema oscuro. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
a.chip:hover { text-decoration: none; filter: brightness(1.12); }

/* Variante discreta: para listas largas, donde un bloque de color en cada fila
   cansaría la vista. Mantiene la identidad con menos peso visual. */
.chip.suave {
  background: var(--marca-suave, var(--fondo-3));
  color: var(--marca, var(--texto));
  box-shadow: inset 0 0 0 1px var(--marca-borde, var(--borde));
}

/* Proveedor propio: compras directas tuyas, no de un mayorista.
   Rojo tenue, lo justo para distinguirlo sin competir con los colores de marca. */
:root {
  --propio-fondo: rgba(229, 9, 20, .10);
  --propio-borde: rgba(229, 9, 20, .35);
  --propio-texto: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --propio-fondo: rgba(229, 9, 20, .18);
    --propio-borde: rgba(229, 9, 20, .45);
    --propio-texto: #ff9b9b;
  }
}

.chip-propio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--propio-fondo);
  color: var(--propio-texto);
  border: 1px solid var(--propio-borde);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Fila de un proveedor propio dentro de una lista. */
.fila-propia { background: var(--propio-fondo); }

/* Punto de color, cuando el nombre ya está escrito al lado. */
.punto-marca {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marca, var(--texto-2));
  flex: none;
  vertical-align: baseline;
}

/* Barra lateral de color: identifica la fila o el panel de un servicio. */
.franja-marca { border-left: 3px solid var(--marca, var(--borde)); }
td.franja-marca, th.franja-marca { padding-left: 11px; }

.panel.con-marca { border-top: 3px solid var(--marca, var(--borde)); }

/* Título de una pantalla de servicio: el color acompaña al nombre. */
.titulo-marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.titulo-marca::before {
  content: "";
  width: 6px;
  height: 26px;
  border-radius: 3px;
  background: var(--marca, var(--acento));
  flex: none;
}

/* Selector de color en el formulario de suscripción. */
.paleta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.paleta-opcion {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.paleta-opcion:hover { transform: scale(1.1); }
.paleta-opcion.activa { border-color: var(--texto); }

.campo input[type="color"] {
  width: 56px;
  height: 38px;
  padding: 3px;
  cursor: pointer;
}

/* --- Calendario de pagos --- */
.calendario { padding: 12px; overflow-x: auto; }

.calendario-cabeza,
.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(115px, 1fr));
  gap: 5px;
}
.calendario-semana { margin-bottom: 5px; }

.calendario-dia-nombre {
  padding: 6px 8px;
  color: var(--texto-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}

.calendario-celda {
  min-height: 96px;
  padding: 7px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calendario-celda.otro-mes { opacity: .4; }
.calendario-celda.es-hoy { border-color: var(--acento); border-width: 2px; padding: 6px; }
/* Días ya pasados que tenían pagos: se atenúan para que la vista se concentre
   en lo que todavía hay que pagar. */
.calendario-celda.dia-pasado { background: var(--fondo-3); }

.calendario-numero {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
}
.calendario-total { color: var(--acento); font-size: 12px; font-variant-numeric: tabular-nums; }
.es-hoy .calendario-numero { color: var(--acento); }

.calendario-pago {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 6px;
  /* Fondo tenue y borde del color del servicio: identifica sin gritar. */
  background: var(--marca-suave, var(--fondo-3));
  border-left: 3px solid var(--marca, var(--acento));
  font-size: 12px;
  color: var(--texto);
  line-height: 1.3;
}
.calendario-pago:hover { filter: brightness(1.25); text-decoration: none; }
/* Proyecciones del ciclo, no fechas confirmadas. */
.calendario-pago.proyectado { border-left-style: dashed; opacity: .62; }
.calendario-pago-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario-pago-valor { font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }

@media (max-width: 900px) {
  .calendario-cabeza, .calendario-semana { grid-template-columns: repeat(7, minmax(96px, 1fr)); }
  .calendario-celda { min-height: 82px; }
  .calendario-pago-valor { display: none; }
}

/* --- Paginador --- */
.paginador { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 16px; }

/* --- Portal público del cliente --- */
.publico {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 18px 60px;
}
.publico-cabeza { text-align: center; margin-bottom: 26px; }
.publico-cabeza .logo { font-size: 34px; color: var(--acento); font-weight: 700; }
.monto-grande {
  font-size: 42px;
  font-weight: 800;
  color: var(--acento);
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.datos-pago { display: flex; flex-direction: column; gap: 8px; }
.dato { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.dato:last-child { border-bottom: none; }
.dato span:first-child { color: var(--texto-2); }
.dato span:last-child { font-weight: 600; text-align: right; }


/* --- Identidad de YSN Plus ---
   El logo es un JPG con fondo propio, así que se recorta en círculo: como
   cuadrado se vería un recuadro pegado sobre la barra. */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Sin esto, el texto se alinea por su línea base y queda desplazado
     respecto al centro del logo. */
  line-height: 1;
}

.marca-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: block;
  box-shadow: 0 0 0 1px var(--borde);
}

/* --- Pantalla de entrada --- */

.entrada {
  /* Más ancho que la tarjeta sola: el banner es apaisado (1000x162) y
     encajonarlo en 380px lo dejaba diminuto e ilegible. */
  max-width: 560px;
  margin: 56px auto 0;
  padding: 0 18px 60px;
}

.entrada-banner {
  display: block;
  width: 100%;
  height: auto;
  /* El banner ya trae su propio fondo negro y su margen interno: sin caja,
     sin borde y sin sombra se ve como fue diseñado. */
  margin: 0 0 26px;
}

/* La tarjeta del formulario sí va estrecha y centrada bajo el banner. */
.entrada .panel {
  max-width: 380px;
  margin: 0 auto;
}
.entrada .panel-cuerpo { padding: 26px; }
.entrada h1 { margin: 0 0 4px; font-size: 20px; color: var(--texto); }

.centrado { text-align: center; }
.entrada .centrado { margin-top: 18px; }

/* --- Páginas que ve el cliente ---
   El logo va más grande: aquí la marca es lo que le dice que el link es
   legítimo antes de subir el comprobante de un pago. */

.publico-cabeza { text-align: center; margin-bottom: 26px; }

.publico-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  box-shadow: 0 0 0 1px var(--borde), 0 6px 20px rgba(0, 0, 0, .28);
}

.publico-cabeza .logo {
  font-size: 26px;
  color: var(--acento);
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .entrada { margin-top: 28px; }
  .entrada-banner { margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .barra { padding: 12px 13px; column-gap: 10px; row-gap: 10px; min-height: 0; }
  /* En móvil el menú baja a su propia fila y se desliza en horizontal. Sin
     nowrap las 9 secciones se apilarían y la barra ocuparía media pantalla. */
  .menu {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .menu::-webkit-scrollbar { display: none; }
  .buscador input { width: 130px; }
  .contenido { padding: 16px 13px 50px; }
  .encabezado h1 { font-size: 20px; }
  th, td { padding: 9px 10px; }
}

@media print {
  .barra, .pie, .acciones, .filtros { display: none; }
  body { background: #fff; color: #000; }
}