/*
  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;
}
.logo-preview img { 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; } }