/* ===========================================================================
   Apulogic Gestión
   Misma identidad que la web pública: Outfit, navy y cian, día y noche.

   El público son negocios pequeños sin área de sistemas, así que aquí manda
   una regla por encima del gusto: pocos elementos, texto grande y objetivos
   de clic amplios. Un sistema de gestión que hay que mirar de cerca se
   abandona en una semana.
   =========================================================================== */

:root {
  --bg: #04060f;
  --bg2: #070b1d;
  --sup: #0b1228;
  --sup2: #111a3a;
  --linea: #1a2550;
  --acento: #22d3ee;
  --acento2: #38bdf8;
  --tinta: #04060f;
  --tenue: #9aa7c2;
  --tenue2: #6b7896;
  --hielo: #f4f7fc;
  --bien: #34d399;
  --mal: #fb7185;
  --aviso: #fbbf24;
  --sombra: 0 10px 40px -12px rgba(2, 6, 23, 0.85);
  color-scheme: dark;
}

[data-tema="claro"] {
  --bg: #f6f8fc;
  --bg2: #ffffff;
  --sup: #ffffff;
  --sup2: #eef2f9;
  --linea: #d7e0ee;
  /* El cian de marca no contrasta sobre blanco: en modo día baja de tono y
     el brillante se reserva para rellenos, nunca para texto. */
  --acento: #0e7490;
  --acento2: #0891b2;
  --tinta: #ffffff;
  --tenue: #55617a;
  --tenue2: #76839c;
  --hielo: #081027;
  --bien: #047857;
  --mal: #be123c;
  --aviso: #b45309;
  --sombra: 0 10px 40px -16px rgba(8, 16, 39, 0.22);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tenue);
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { color: var(--hielo); line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--acento); }

/* --- Estructura ---------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca b { color: var(--hielo); font-size: 1.15rem; font-weight: 700; }
.marca span { color: var(--acento); font-size: 1.15rem; font-weight: 700; }
.cabecera nav { display: flex; gap: 1.1rem; margin-left: auto; align-items: center; }
.cabecera nav a { color: var(--tenue); text-decoration: none; font-size: .95rem; }
.cabecera nav a:hover { color: var(--hielo); }

.envoltura { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.centrado { max-width: 460px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }

/* --- Piezas -------------------------------------------------------------- */
.tarjeta {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--sombra);
}

.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.modulo {
  display: flex; flex-direction: column;
  background: var(--sup); border: 1px solid var(--linea); border-radius: 14px;
  padding: 1.35rem; text-decoration: none; min-height: 168px;
  transition: transform .15s, border-color .15s;
}
.modulo:hover { transform: translateY(-3px); border-color: var(--acento); }
.modulo h3 { color: var(--hielo); }
.modulo p { color: var(--tenue); font-size: .92rem; margin: .35rem 0 0; }
.modulo .pie { margin-top: auto; padding-top: 1rem; }
.modulo.apagado { opacity: .62; }
.modulo.apagado:hover { opacity: 1; }

.icono {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  color: var(--acento); margin-bottom: .85rem;
}

.marbete {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linea);
  color: var(--tenue);
}
.marbete.verde { color: var(--bien); border-color: color-mix(in srgb, var(--bien) 45%, transparent); }
.marbete.ambar { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
.marbete.rojo  { color: var(--mal);  border-color: color-mix(in srgb, var(--mal) 45%, transparent); }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.3rem; border-radius: 11px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: none;
  background: linear-gradient(135deg, var(--acento), var(--acento2));
  color: var(--tinta);
}
.boton:hover { filter: brightness(1.1); }
.boton.secundario {
  background: transparent; border: 1px solid var(--linea); color: var(--hielo);
}
.boton.secundario:hover { border-color: var(--acento); }
.boton.pequeno { padding: .45rem .8rem; font-size: .85rem; }
.boton.ancho { width: 100%; }

/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; margin-bottom: .35rem; color: var(--hielo); font-weight: 600; font-size: .92rem; }
.campo .ayuda { display: block; margin-top: .3rem; color: var(--tenue2); font-size: .82rem; }
input, select, textarea {
  width: 100%; padding: .78rem .9rem; font: inherit;
  background: var(--bg2); color: var(--hielo);
  border: 1px solid var(--linea); border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.fila { display: grid; gap: 1rem; grid-template-columns: 1fr 2fr; }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
  padding: .9rem 1.1rem; border-radius: 11px; margin-bottom: 1.25rem;
  border: 1px solid var(--linea); background: var(--sup); color: var(--hielo);
}
.aviso.bien { border-color: color-mix(in srgb, var(--bien) 45%, transparent); }
.aviso.mal  { border-color: color-mix(in srgb, var(--mal) 55%, transparent); }

/* --- Recuadro publicitario de la prórroga -------------------------------- */
.promo {
  border: 1px dashed color-mix(in srgb, var(--acento) 50%, transparent);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
  border-radius: 14px; padding: 1.2rem 1.35rem; margin-bottom: 1.5rem;
}
.promo h3 { margin-bottom: .3rem; }

/* --- Tabla --------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--linea); }
th { color: var(--tenue2); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
td { color: var(--hielo); }

/* --- Pie de las demos ----------------------------------------------------- */
.pie-demo {
  margin-top: 3rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--linea);
  color: var(--tenue); font-size: .92rem;
}
.pie-demo strong { color: var(--hielo); }

.tenue { color: var(--tenue2); font-size: .88rem; }
.pila > * + * { margin-top: 1rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.55rem; }
  .fila { grid-template-columns: 1fr; }
  .cabecera { flex-wrap: wrap; }
  .cabecera nav { gap: .85rem; }
}

/* --- Buzón de desarrollo -------------------------------------------------- */
/* Deliberadamente distinto del resto: tiene que cantar que esto no es parte
   del sistema que ve el cliente, sino una herramienta de la laptop. */
.marbete-dev {
  padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-decoration: none;
  color: var(--aviso); border: 1px dashed color-mix(in srgb, var(--aviso) 55%, transparent);
}
.marbete-dev:hover { background: color-mix(in srgb, var(--aviso) 12%, transparent); }

.rejilla-correos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.correo-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.correo-cabeza strong { color: var(--hielo); }
.correo-botones { display: flex; gap: .6rem; flex-wrap: wrap; }

/* --- Configuración -------------------------------------------------------- */
.logo-fila { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.logo-caja {
  width: 190px; min-height: 96px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .9rem; border-radius: 12px;
  border: 1px dashed var(--linea);
  /* Cuadros grises: un logo blanco sobre fondo blanco, o negro sobre negro,
     desaparecería. Así se ve siempre dónde acaba la imagen. */
  background-color: var(--bg2);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--linea) 50%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--linea) 50%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--linea) 50%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--linea) 50%, transparent) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.logo-caja img { max-width: 100%; max-height: 120px; display: block; }

.nota-numero {
  margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-radius: 10px;
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 25%, transparent);
  font-size: .94rem;
}
.nota-numero strong { color: var(--acento); }

.ayuda.mal { color: var(--mal); }

textarea { resize: vertical; min-height: 6rem; }

/* --- Cotizaciones --------------------------------------------------------- */
.titulo-fila {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.titulo-fila h1, .titulo-fila h2 { margin: 0; }
.botonera { display: flex; gap: .6rem; flex-wrap: wrap; }
.botonera-ancha { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.botonera-ancha form { margin: 0; }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .88rem; color: var(--tenue);
  border: 1px solid var(--linea); background: var(--sup);
}
.chip:hover { color: var(--hielo); }
.chip.activo { color: var(--tinta); background: var(--acento); border-color: var(--acento); font-weight: 600; }
.chip .cuenta { font-size: .78rem; opacity: .75; }

.buscador { display: flex; gap: .5rem; margin-left: auto; }
.buscador input { width: auto; min-width: 12rem; padding: .38rem .7rem; }

.con-boton { display: flex; gap: .6rem; align-items: stretch; }
.con-boton select { flex: 1; }
.con-boton .boton { white-space: nowrap; display: flex; align-items: center; }

.campo.tres { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }

/* Las líneas de la cotización. Una rejilla y no una tabla: en el celular
   las columnas se apilan, y una tabla no sabe hacer eso. */
.lineas { margin: .6rem 0 1rem; }
.linea-cabeza, .linea {
  display: grid; gap: .5rem; align-items: center;
  grid-template-columns: 1fr 5.5rem 7rem 5rem 8rem 2rem;
}
.linea-cabeza {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue2); font-weight: 600; padding: 0 .2rem .4rem;
}
.linea-cabeza span:nth-child(n+2) { text-align: right; }
.linea { margin-bottom: .45rem; }
.linea input { padding: .55rem .65rem; }
.linea input.num { text-align: right; }
.linea .importe { text-align: right; font-weight: 600; color: var(--hielo); font-size: .95rem; }
.linea .importe.vacio { color: var(--tenue2); font-weight: 400; }
.linea .quitar {
  background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1;
  color: var(--tenue2); padding: .2rem;
}
.linea .quitar:hover { color: var(--mal); }

.totales { margin-top: 1.3rem; margin-left: auto; max-width: 20rem; }
.totales div {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: .4rem 0; color: var(--tenue);
}
.totales div strong { color: var(--hielo); }
.totales .grande {
  margin-top: .3rem; padding-top: .7rem; border-top: 1px solid var(--linea);
  font-size: 1.15rem;
}
.totales .grande strong { color: var(--acento); font-size: 1.3rem; }

.cliente-cab { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.tabla-cot a { text-decoration: none; }

@media (max-width: 760px) {
  .campo.tres { grid-template-columns: 1fr; }
  .buscador { margin-left: 0; width: 100%; }
  .buscador input { flex: 1; min-width: 0; }
  .linea-cabeza { display: none; }
  .linea {
    grid-template-columns: 1fr 1fr 2rem;
    padding: .7rem; margin-bottom: .7rem;
    border: 1px solid var(--linea); border-radius: 10px;
  }
  .linea input[name="descripcion[]"] { grid-column: 1 / 3; }
  .linea .quitar { grid-row: 1; grid-column: 3; }
  .linea .importe { grid-column: 1 / 4; text-align: right; }
  .totales { max-width: none; }
}

/* En pantalla angosta una tabla ancha empujaba TODA la página, y se acababa
   arrastrando el sitio entero de lado para leer una columna. Así la barra de
   desplazamiento es de la tabla y no de la página. */
@media (max-width: 760px) {
  table { display: block; overflow-x: auto; }
  .tabla-cot td, .tabla-cot th { white-space: nowrap; }
  .tabla-cot td:first-child { white-space: normal; min-width: 11rem; }
}

/* --- Recuadro de alta rápida ---------------------------------------------- */
.dialogo {
  width: min(34rem, calc(100vw - 2rem));
  padding: 1.6rem; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--sup); color: var(--hielo); box-shadow: var(--sombra);
}
.dialogo::backdrop { background: rgba(2, 6, 23, .65); }
.dialogo h2 { margin-bottom: .2rem; }

/* --- Resumen de lo aceptado ----------------------------------------------- */
.resumen-aceptado { margin: -.4rem 0 1.2rem; color: var(--tenue); font-size: .94rem; }
.resumen-aceptado strong { color: var(--bien); margin-left: .5rem; }