/*
  Anadidos propios del backend real.

  El aspecto del panel es el de la maqueta V1.3 y vive en panel.css, que se
  copio tal cual. Aqui solo van las piezas que la maqueta no tenia porque no le
  hacian falta: la pantalla de acceso, el bloqueo de Configuracion, los avisos y
  el enlace de navegacion, que en la maqueta era un <button> y ahora es un <a>.
*/

/* --- navegacion: el <a> tiene que comportarse como el <button> original --- */
.nav a.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.nav a.nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.nav-link.active { background: rgba(255, 255, 255, .14); color: #fff; }

a.avatar { text-decoration: none; display: grid; place-items: center; }

/* --- avisos --- */
.alert {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  background: var(--surface);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.alert b { font-weight: 700; }
.alert.warn { border-left-color: var(--gold); background: var(--cream2); }
.alert.error { border-left-color: var(--danger); }
.alert.ok { border-left-color: var(--ok); }

/* --- pantalla de acceso --- */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 55%, #0a1c38 100%);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 30px 28px;
  box-shadow: 0 30px 70px rgba(4, 16, 35, .38);
}
.login-card .brand-mark { width: 46px; height: 46px; font-size: 16px; margin-bottom: 16px; }
.login-card h1 { font-size: 21px; margin: 0 0 4px; color: var(--ink); }
.login-card p.sub { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.login-card input {
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}
.login-card input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.login-card button[type="submit"] { width: 100%; margin-top: 6px; }
.login-foot { margin-top: 18px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* --- Configuracion bloqueada --- */
.locked-panel {
  max-width: 520px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px 30px;
  text-align: center;
  box-shadow: var(--shadow);
}
.locked-panel .lock-icon { font-size: 34px; }
.locked-panel h2 { margin: 12px 0 6px; font-size: 20px; color: var(--ink); }
.locked-panel p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 auto 20px; max-width: 400px; }
.locked-panel form { display: grid; gap: 12px; max-width: 320px; margin: 0 auto; }
.locked-panel input {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  letter-spacing: .08em;
}
.master-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 157, 99, .12);
  color: var(--ok);
}

/* --- tabla de facturas: la maqueta no preveia el estado vacio --- */
.empty-row td { text-align: center; color: var(--muted); padding: 32px 12px; font-size: 13.5px; }

/* El contador de interesados parte "3 interesados" en dos lineas dentro de la
   celda estrecha de la tabla; con el texto entero se lee de un vistazo. */
.duplicate-badge { white-space: nowrap; }

/* --- marca de fase, para que se vea que aun no esta cableado --- */
.phase-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(18, 86, 216, .1);
  color: var(--blue);
  margin-left: 8px;
  vertical-align: middle;
}

/* --- bloques de la maqueta a los que les faltaba la version en oscuro ---

   .duplicate-summary y .invoice-group-note fijan un fondo claro pero dejan que
   el texto herede su color. En modo Noche el texto es claro, asi que quedaban
   blanco sobre blanco. Se arregla aqui y no en panel.css para no tocar el CSS
   original de la maqueta, que se copio tal cual. */
body.theme-night .duplicate-summary { background: #0f1927; border-color: #2a3a50; }
body.theme-soft .duplicate-summary { background: var(--cream2); }
body.theme-night .invoice-group-note { background: #13263d; border-color: #244363; color: #bcd0e8; }
body.theme-night .invoice-group-note b { color: #eaf1fb; }

/* Los tres temas cambian variables en <body>; estos bloques solo recolocan lo
   que se anadio aqui, para que no se quede en claro cuando el resto no lo esta. */
body.theme-night .alert,
body.theme-night .locked-panel,
body.theme-night .login-card { background: #0f1927; border-color: rgba(255, 255, 255, .1); }
body.theme-night .alert.warn { background: #1a1d16; }
body.theme-night .login-card input,
body.theme-night .locked-panel input { background: #0b1420; border-color: rgba(255, 255, 255, .14); color: #eaf1fb; }

body.theme-soft .alert,
body.theme-soft .locked-panel,
body.theme-soft .login-card { background: var(--cream2); }

/* --- vista previa con la plantilla real (Fase C) ---

   El iframe se pinta siempre a 900 px, que es el ancho para el que esta hecha
   la pagina A4, y se reduce con transform: scale(). Estrechar el iframe seria
   mas facil, pero el CSS aprobado tiene puntos de ruptura para movil y el
   documento cambiaria de maquetacion: la vista previa dejaria de enseñar lo
   que se va a imprimir. */
.preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.preview-bar .btn.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.preview-stage {
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #b9bcc4;
  padding: 14px;
  display: flex;
  justify-content: center;
}
.preview-page {
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(12, 22, 40, .22);
  background: #fff;
  flex: none;
}
.preview-frame {
  border: 0;
  display: block;
  transform-origin: top left;
  background: #fff;
}
body.theme-night .preview-stage { background: #0b1420; border-color: #2a3a50; }
body.theme-soft .preview-stage { background: #cfc9bd; }

/* --- huecos de fotografia del editor (Fase D) --- */
.photo-slot {
  border: 1px dashed #b8c3d4;
  border-radius: 12px;
  background: #f7f9fc;
  padding: 8px;
  display: grid;
  gap: 6px;
  justify-items: center;
  font-size: 11px;
}
.photo-slot img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}
.photo-slot .photo-empty {
  width: 100%;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}
.photo-slot input[type=file] { width: 100%; font-size: 10px; padding: 4px; }
body.theme-night .photo-slot { background: #0f1927; border-color: #2a3a50; }
body.theme-soft .photo-slot { background: var(--cream2); }

/* --- logotipo en Configuracion --- */
.logo-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, .6fr); gap: 16px; align-items: start; }
.logo-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 12px;
  background: #fff;
  text-align: center;
}
/* El :not() es necesario, no cosmetico. Esta regla es mas especifica que
   .brandLogo, asi que le pisaba el max-height y en la vista previa el logotipo
   se medía 170x80 mientras en la cabecera real medía 94x44. Se veía parecido
   -la caja lo recorta- y era otra cosa: justo lo que la vista previa no puede
   hacer. El del Call Center se rige SOLO por su hueco. */
.logo-preview img:not(.brandLogo) { max-width: 100%; max-height: 110px; }
body.theme-night .logo-preview { background: #0f1927; border-color: #2a3a50; }
body.theme-soft .logo-preview { background: var(--cream2); }
@media (max-width: 900px) { .logo-row { grid-template-columns: 1fr; } }

/* La vista previa del logotipo del Call Center va sobre el mismo azul que su
   cabecera, en los tres temas. Sobre fondo blanco, un logotipo pensado para
   cabecera oscura -que es el que hay que subir- se veria en blanco sobre
   blanco: la vista previa diria "no hay nada" con el archivo ya subido. */
.logo-preview.callcenter,
body.theme-night .logo-preview.callcenter,
body.theme-soft .logo-preview.callcenter {
  background: linear-gradient(90deg, #062440, #0a3159 60%, #062440);
  border-color: #0a3159;
  place-items: center start;
  padding: 14px;
  gap: 10px;
}
.logo-preview.callcenter .small.muted { color: #c3d3e6; }

/* La vista previa reproduce el bloque de marca de la cabecera del Operador: el
   mismo hueco reservado (.brandLogoBox, que vive en marca-callcenter.css y la
   comparten las dos pantallas) y el mismo subtitulo al lado. El cuadro "DA" se
   redibuja aqui porque es solo la ilustracion de lo que ya hay cuando no se ha
   subido nada; el hueco, que es lo que tiene que coincidir de verdad, NO se
   redibuja: es literalmente la misma regla. */
.logo-preview.callcenter .cc-brand { display: flex; gap: 12px; align-items: center; color: #fff; }
.logo-preview.callcenter .cc-brandMark {
  width: 44px; height: 44px; border-radius: 11px; background: #e9aa22;
  display: grid; place-items: center; color: #0a2a4d; font-weight: 900; font-size: 18px;
  flex: 0 0 auto;
}
.logo-preview.callcenter .cc-brand strong { font-size: 20px; display: block; }
.logo-preview.callcenter .cc-brand small { display: block; color: #d8e2ed; font-size: 11px; margin-top: 1px; }
.logo-preview.callcenter .cc-pie { font-size: 10.5px; color: #93aac6; }

/* --- marca de la barra lateral --- */
/* La segunda linea cabe entera; sin esto "Panel administrativo" se parte en
   dos y el bloque de la marca queda descuadrado. panel.css es el CSS del
   cliente y no se toca: los ajustes van siempre aqui. */
.brand small { white-space: nowrap; font-size: 11.5px; }

/* --- acciones de la tabla de facturas --- */
/* Con Archivar y Eliminar la celda pasa de tres botones a cinco. Los <form>
   que envuelven a los dos nuevos eran cajas flex por si mismas, de modo que
   cada boton caia en su propia linea y la fila crecia hasta hacerse ilegible.
   display:contents saca al boton al mismo nivel que los enlaces, y asi los
   cinco fluyen y envuelven juntos como antes. */
td.actions form { display: contents; }
td.actions .btn { padding: 7px 10px; font-size: 12px; }

/* Los filtros y algunas acciones son enlaces con aspecto de boton. panel.css
   define .btn dando por hecho un <button>, que no lleva subrayado; en un <a> el
   navegador lo pone y las pestanas de filtro salen subrayadas. */
a.btn { text-decoration: none; }

/* Un boton de filtro con contador: el badge iba a la linea de abajo y descolgaba
   la fila entera. */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* La columna de orden de la guia lleva dos botones minusculos; sin esto el
   segundo cae debajo del primero y la fila crece al doble. */
td.actions .btn { white-space: nowrap; }

/* --- desplegables nativos en Modo Noche --------------------------------------
   Mismo arreglo que en el modulo de Operador, donde salio el fallo: la lista de
   opciones de un <select> no la pinta esta hoja, la dibuja el navegador, y para
   elegir sus colores mira `color-scheme` y no el `background` del elemento. Sin
   declararlo, en Noche abre la lista con el fondo claro del sistema y encima
   cae el color de texto casi blanco del select: opciones ilegibles.

   El panel tiene desplegables en el editor de facturas, en el duplicado y en
   los filtros de notas, con el mismo defecto aunque nadie lo hubiera reportado
   todavia. Se arregla aqui a la vez para no dejar la mitad hecha. */
body.theme-night { color-scheme: dark; }
body.theme-night option,
body.theme-night optgroup { background: #121d2c; color: #eaf1fb; }

/* La factura de la vista previa se queda blanca tambien en Noche -es la regla
   que ya estaba en panel.css-, asi que su trozo vuelve al esquema claro. */
body.theme-night .invoice-mini,
body.theme-night .modal-invoice { color-scheme: light; }