/* ===================================================================
   BASE.CSS
   Variables y estilos generales reutilizables en todo el proyecto
   (login, calendario, formularios, etc.)
   =================================================================== */

:root{
  color-scheme: light;

  /* Tema claro (Fragua fría) */
  --iron: #1C2024;          /* chrome + botones oscuros */
  --iron-soft: #2A2F35;
  --ember: #B5480F;         /* acento */
  --ember-bright: #F0812E;  /* acento sobre oscuro */
  --brass: #98938A;         /* metálico apagado */
  --parchment: #F5F6F7;     /* fondo de página */
  --parchment-dim: #EBEDEF; /* tarjetas */
  --surface: #FFFFFF;       /* inputs, menús */
  --border: #CDD2D7;        /* bordes */
  --ink: #1E2328;           /* texto principal */
  --ink-faint: #59616B;     /* texto secundario */
  --on-dark: #F4F6F7;       /* claro fijo (chrome, ambos temas) */
  --on-accent: #FFFFFF;     /* sobre --ember y estados */
  --slate: #5C636E;         /* relleno neutro: estado "cancelada" */
  --error: #BC3B2E;
  --success: #5E6E3B;

  /* alfas: lavados de acento, sombras */
  --accent-wash: rgba(181, 72, 15, 0.10);
  --accent-wash-strong: rgba(181, 72, 15, 0.15);
  --accent-line: rgba(181, 72, 15, 0.30);
  --error-wash: rgba(188, 59, 46, 0.08);
  --error-line: rgba(188, 59, 46, 0.30);
  --success-wash: rgba(94, 110, 59, 0.12);
  --on-dark-wash: rgba(244, 246, 247, 0.08);
  --on-dark-dim: rgba(244, 246, 247, 0.65);
  --on-dark-line: rgba(244, 246, 247, 0.15);
  --shadow-color: rgba(20, 22, 26, 0.15);

  /* Paleta de gráficas. Deliberadamente FUERA de la paleta de la fragua: esta es
     metálica y desaturada, y no da tonos categóricos distinguibles (--slate y
     --success quedan a ΔE 9,3, indistinguibles incluso con visión normal).
     Es el trío de Okabe-Ito, seguro para daltonismo; validado contra las dos
     superficies, por eso NO se redefine en los bloques de tema oscuro: el color
     identifica la serie y no debe cambiar al alternar el tema. */
  --chart-1: #0072B2;  /* azul  */
  --chart-2: #C67F00;  /* ámbar */
  --chart-3: #009E73;  /* verde */

  /* flecha de los <select> (color = --ink-faint del tema) */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2359616B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Modo oscuro: prefers-color-scheme salvo que el usuario fuerce un tema
   (data-theme). --on-dark y --on-accent no se redefinen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --iron: #2B3138;
    --iron-soft: #363D45;
    --ember: #E8935A;
    --ember-bright: #F0A574;
    --brass: #8A8F97;
    --parchment: #121417;
    --parchment-dim: #1B1E22;
    --surface: #262B30;
    --border: #363C43;
    --ink: #E6E8EB;
    --ink-faint: #99A0A9;
    --error: #E06A5E;
    --success: #7FA05C;
    --accent-wash: rgba(232, 147, 90, 0.12);
    --accent-wash-strong: rgba(232, 147, 90, 0.18);
    --accent-line: rgba(232, 147, 90, 0.35);
    --error-wash: rgba(224, 106, 94, 0.12);
    --error-line: rgba(224, 106, 94, 0.35);
    --success-wash: rgba(127, 160, 92, 0.15);
    --on-accent: #221304;
    --slate: #7C8590;
    --on-dark-wash: rgba(244, 246, 247, 0.06);
    --on-dark-dim: rgba(244, 246, 247, 0.60);
    --on-dark-line: rgba(244, 246, 247, 0.14);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2399A0A9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --iron: #2B3138;
  --iron-soft: #363D45;
  --ember: #E8935A;
  --ember-bright: #F0A574;
  --brass: #8A8F97;
  --parchment: #121417;
  --parchment-dim: #1B1E22;
  --surface: #262B30;
  --border: #363C43;
  --ink: #E6E8EB;
  --ink-faint: #99A0A9;
  --error: #E06A5E;
  --success: #7FA05C;
  --accent-wash: rgba(232, 147, 90, 0.12);
  --accent-wash-strong: rgba(232, 147, 90, 0.18);
  --accent-line: rgba(232, 147, 90, 0.35);
  --error-wash: rgba(224, 106, 94, 0.12);
  --error-line: rgba(224, 106, 94, 0.35);
  --success-wash: rgba(127, 160, 92, 0.15);
  --on-dark-wash: rgba(244, 246, 247, 0.06);
  --on-dark-dim: rgba(244, 246, 247, 0.60);
  --on-dark-line: rgba(244, 246, 247, 0.14);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2399A0A9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

html, body{
  height: 100%;
  position: relative;
}

body{
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body{
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}

.site-main{
  flex: 1;
  min-width: 0;
}

/* ---------- ANCHO DE CONTENIDO ----------
   Una sola utilidad para todas las páginas: sustituye a los .container de
   Bootstrap y a los max-width que cada hoja de estilos definía por su cuenta. */
.content{
  width: 100%;
  max-width: var(--content-w, 60rem);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 32px);
}

.content--narrow{ --content-w: 40rem; }
.content--wide{ --content-w: 74rem; }

h1, h2, h3, h4{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  /*color: var(--iron);*/
}

/* enlaces sin clase (si no, Bootstrap los pone azul) */
a{
  color: var(--ember);
}

a:hover{
  color: var(--ember);
}

/* skip link: oculto hasta recibir foco */
.skip-link{
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--iron);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus{
  top: 12px;
  color: var(--on-dark);
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* Bootstrap no trae .alert-error (usa .alert-danger) */
.alert-error{
  color: var(--error);
  background: var(--error-wash);
  border-color: var(--error-line);
}

/* kicker mono sobre los títulos (pantallas de acceso y legales) */
.eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 10px;
}

/* ---------- CASILLA DE ACEPTACIÓN (alta) ----------
   Bootstrap trae .form-check, pero aquí el checkbox va dentro del label junto a un
   párrafo con enlaces, así que hace falta alinearlo arriba y no al centro: con dos
   líneas de texto, el centrado deja la casilla flotando a media altura. */
.field-consent .form-check-label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-faint);
  cursor: pointer;
}

.field-consent .form-check-input{
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--ember);
  cursor: pointer;
}

/* ---------- ELIMINAR CUENTA ----------
   Encabezado de la zona destructiva en Configuración, y los botones de la página de
   confirmación. Separados del resto para que no se pulsen por inercia. */
/* Va combinado con .section-label, que también fija el color. A igualdad de
   especificidad ganaría el que se define después en el fichero, así que se apunta a
   las dos clases juntas para no depender del orden. */
.section-label.settings-danger-title{
  color: var(--error);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* El aviso de la página de confirmación. No reutiliza .unbilled-callout porque aquel
   es flex con space-between (texto a un lado, acción al otro) y aquí son dos párrafos
   seguidos, que acababan en dos columnas. Y va con la paleta de error, no con la de
   acento: esto no es una sugerencia, es una advertencia. */
.account-delete-warning{
  margin: 20px 0 28px;
  padding: 16px 18px;
  background: var(--error-wash);
  border: 1px solid var(--error-line);
  border-left: 3px solid var(--error);
  border-radius: 8px;
}

.account-delete-warning p{
  margin: 0;
}

.account-delete-warning p + p{
  margin-top: 10px;
}

.account-delete-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

/* Modificador de .btn-forge para la acción que destruye datos: que el color diga lo
   que va a pasar antes de pulsarlo. */
.btn-forge.btn-forge-danger{
  background: var(--error);
  color: var(--on-accent);
}

.btn-forge.btn-forge-danger:hover{
  background: var(--error);
  color: var(--on-accent);
  filter: brightness(1.1);
}

/* ---------- PÁGINAS DE ERROR (404, 403, 500) ----------
   500.html no extiende base.html —se renderiza sin contexto— pero sí carga esta
   hoja, así que las tres comparten estilo. */
.error-page{
  text-align: center;
  padding-block: clamp(48px, 12vh, 110px);
}

.error-page-code{
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(64px, 18vw, 128px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--border);
  margin: 0 0 4px;
}

.error-page h1{
  margin: 0 0 12px;
  font-size: clamp(22px, 5vw, 30px);
}

.error-page p{
  color: var(--ink-faint);
  margin: 0 auto;
  max-width: 34rem;
}

.error-page-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* ---------- SELECTOR DE AÑO ----------
   Compartido por la lista de facturas y la página de estadísticas. */
.quarter-year-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
}

.quarter-year-stepper .year-step{
  color: var(--ember);
  text-decoration: none;
  font-size: 15px;
  padding: 2px 6px;
}

.quarter-year-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  min-width: 42px;
  text-align: center;
}

/* Encabezado de sección dentro de la app: alternativa discreta al eyebrow. */
.section-label{
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}

/* campo de formulario */
.field{
  margin-bottom: 20px;
}

.field label{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 7px;
}

/* Campo de formulario: un único estilo de .form-control para toda la app
   (login, buscadores y filtros incluidos, estén o no dentro de .field). */
.form-control{
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.form-control::placeholder{
  color: var(--ink-faint);
  opacity: 0.7;
}

.form-control:focus{
  outline: none;
  border-color: var(--ember);
  background: var(--surface);
  box-shadow: 0 0 0 0.15rem var(--accent-wash-strong);
}

/* Desplegables: sin la apariencia nativa, con nuestra flecha (token por tema). */
select.form-control{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

textarea.form-control{
  min-height: 110px;
  resize: vertical;
}

/* Input de archivo: el botón nativo con aspecto de botón fantasma. */
.form-control[type="file"]{
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-faint);
}

.form-control[type="file"]::file-selector-button{
  margin: -8px 12px -8px -12px;
  padding: 8px 14px;
  background: var(--parchment-dim);
  color: var(--ink);
  border: none;
  border-right: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.form-control[type="file"]::file-selector-button:hover{
  background: var(--parchment-dim);
}

/* Texto de error bajo un campo. Antes solo existía en legal.css (que ningún
   formulario carga), así que los .field-error salían sin estilo. */
.field-error{
  color: var(--error);
  font-size: 13px;
  margin-top: 6px;
}

/* El campo que de verdad falla, marcado.
   Antes .field-error solo pintaba texto rojo debajo y ningún control cambiaba, así
   que el único con borde de color era el que tuviera el foco — y el color del foco
   (--ember) y el de error (--error) se parecen demasiado. Resultado: en el alta
   parecía que el error estaba en el correo (que tiene autofocus) cuando el que
   fallaba era otro. El borde de error es además más grueso, para que no dependa solo
   del tono. */
.field--invalid .form-control{
  border-color: var(--error);
  border-width: 2px;
}

.field--invalid .form-control:focus{
  border-color: var(--error);
  box-shadow: 0 0 0 0.15rem var(--error-wash);
}

.field--invalid .form-check-input{
  outline: 2px solid var(--error);
  outline-offset: 2px;
  accent-color: var(--error);
}

/* Texto de ayuda de un campo (reglas de contraseña, notas cortas). */
.field-hint{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 6px 0 16px;
}

.field-hint ul{
  margin: 0;
  padding-left: 18px;
}

/* ---------- FLATPICKR: calendario con los tokens del proyecto ---------- */
.flatpickr-calendar{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-color);
  color: var(--ink);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months{
  color: var(--ink);
  fill: var(--ink);
}

/* flatpickr pinta los días de la semana con un negro translúcido y `span.` le da más
   especificidad que un selector de clase a secas; sin esto se pierden en el tema oscuro. */
.flatpickr-weekdays span.flatpickr-weekday{ color: var(--ink-faint); }

.flatpickr-day{
  color: var(--ink);
  border-radius: 4px;
}

.flatpickr-day:hover,
.flatpickr-day:focus{
  background: var(--parchment-dim);
  border-color: var(--parchment-dim);
}

.flatpickr-day.today{ border-color: var(--ember); }

.flatpickr-day.selected,
.flatpickr-day.selected:hover{
  background: var(--ember);
  border-color: var(--ember);
  color: var(--on-accent);
}

/* Los días de otros meses siguen legibles (son clicables); solo los deshabilitados se apagan. */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: var(--ink-faint);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover{
  color: var(--ink-faint);
  opacity: 0.5;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{ fill: var(--ink); }

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg{ fill: var(--ember); }

.flatpickr-time input{ color: var(--ink); }

.flatpickr-time input:hover,
.flatpickr-time input:focus{ background: var(--parchment-dim); }

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after{ border-bottom-color: var(--surface); }

.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after{ border-top-color: var(--surface); }

/* caja de error de formulario */
.error-box{
  background: var(--error-wash);
  border: 1px solid var(--error-line);
  color: var(--error);
  font-size: 13.5px;
  padding: 12px 14px;
  border-radius: 3px;
  margin-bottom: 22px;
}

/* botón primario */
.btn-forge{
  width: 100%;
  padding: 14px;
  /*margin-top: 8px;*/
  background: var(--iron);
  color: var(--on-dark);
  border: none;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-forge-inline{
  width: auto;
  padding: 10px 18px;
  font-size: 14px;
}

.btn-forge-inline::after{
  display: none;
}

.btn-forge-inline:hover{
  background: var(--iron-soft);
}

/* Variante secundaria: solo contorno, para acompañar a una acción principal. */
.btn-forge-ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-forge-ghost:hover{
  background: var(--parchment-dim);
  color: var(--ink);
}

/* ---------- AVISO "HERRAJES SIN FACTURAR" (facturas y ficha de cliente) ---------- */
.unbilled-callout{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 4px;
  padding: 12px 16px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--ember);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}

.unbilled-callout:hover{
  background: var(--accent-wash-strong);
}

.unbilled-callout-text{
  font-size: 13.5px;
}

.unbilled-callout-amount{
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.unbilled-callout-cta{
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ember);
  white-space: nowrap;
}

.btn-forge::after{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(240,129,46,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.btn-forge:hover{ background: var(--iron-soft); color: var(--on-dark); }
.btn-forge:hover::after{ left: 130%; }

.btn-forge:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.btn-forge:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-forge:disabled::after{
  display: none;
}

/* ---------- LISTA DE ACTIVIDAD (citas, herrajes, facturas) ---------- */
.today-appointments-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.today-appointment-item{
  border-bottom: 1px solid var(--parchment-dim);
}

.today-appointment-item:last-child{
  border-bottom: none;
}

.today-appointment-link{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}

.today-appointment-link:hover{
  background: var(--parchment-dim);
}

.today-appointment-time{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-faint);
  min-width: 48px;
}

.today-appointment-client{
  flex: 1;
  font-weight: 500;
  font-size: 14.5px;
}

.today-appointment-status{
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--on-accent);
}

.status-pendiente{ background: var(--ember); }
.status-cancelada{ background: var(--slate); }
.status-completada{ background: var(--success); }

.today-appointments-empty{
  color: var(--ink-faint);
  font-size: 14px;
}

.job-select-invoiced{
  font-size: 11px;
  color: var(--success);
  background: var(--success-wash);
  padding: 3px 8px;
  border-radius: 999px;
}

.chip-link{
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ember);
  background: var(--parchment-dim);
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
}

.chip-link:hover{
  background: var(--accent-wash-strong);
}

/* ------------------------------------------------------- */

.foot-note{
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}

.back-link{
  display: inline-block;
  margin-top: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ember);
  text-decoration: none;
}

.back-link:hover{
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 767.98px){
  .btn-forge-inline {
    width: 100%;
  }
}

/* ---------- CABECERA GLOBAL ---------- */

.app-header{
  background: var(--iron);
  padding: 14px 32px;
}

/* Cabecera mínima de las páginas sin sesión (legales, contacto, recuperar). */
.public-header{
  max-width: 74rem;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 32px) 0;
}

.public-header-brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--brass);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-header-brand:hover{
  color: var(--ember);
}

.public-header-mark{
  height: 44px;
  color: var(--ink);
}

.app-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header-brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', serif;
  color: var(--on-dark);
  font-size: 18px;
  text-decoration: none;
}

.app-header-brand:hover{
  color: var(--on-dark);
}

/* La marca es un PNG usado como máscara: toma el color del texto que la rodea, así una sola
   imagen sirve en claro y en oscuro. Proporción del logo recortado: 678 x 853. */
.logo-mark{
  display: inline-block;
  aspect-ratio: 678 / 853;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--logo-url) center / contain no-repeat;
  mask: var(--logo-url) center / contain no-repeat;
}

.app-header-mark{
  height: 40px;
  color: var(--on-dark);
}

.app-header-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* toggle de tema */
.theme-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--on-dark);
  cursor: pointer;
  transition: background 0.15s ease;
}

.theme-toggle:hover{
  background: var(--on-dark-wash);
}

/* Toggle suelto para las pantallas sin cabecera (login, legales, registro…). */
.theme-toggle-floating{
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1040;
  color: var(--ink);
}

.theme-toggle-floating:hover{
  background: var(--parchment-dim);
}

.theme-toggle:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.theme-toggle svg{
  width: 20px;
  height: 20px;
}

.theme-toggle-sun{ display: none; }

[data-bs-theme="dark"] .theme-toggle-sun{ display: block; }
[data-bs-theme="dark"] .theme-toggle-moon{ display: none; }

.app-header-user.dropdown{
  position: relative;
}

.app-user-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--on-dark);
  cursor: pointer;
  transition: background 0.15s ease;
}

.app-user-toggle:hover{
  background: var(--on-dark-wash);
}

.app-user-toggle:focus-visible{
  background: var(--on-dark-wash);
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.app-user-dropdown-menu{
  background: var(--iron-soft);
  border: 1px solid rgba(152, 147, 138, 0.3);
  border-radius: 6px;
  padding: 6px;
  min-width: 180px;
}

.app-user-dropdown-menu .dropdown-item{
  color: var(--on-dark);
  font-size: 14px;
  border-radius: 4px;
  padding: 8px 12px;
}

.app-user-dropdown-menu .dropdown-item:hover,
.app-user-dropdown-menu .dropdown-item:focus{
  background: var(--accent-wash-strong);
  color: var(--ember-bright);
}

.app-user-dropdown-menu .dropdown-divider{
  border-color: var(--on-dark-line);
  margin: 4px 0;
}

.app-user-dropdown-menu form{
  margin: 0;
}

.app-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--brass);
}

.app-avatar-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ember);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 14px;
}

.app-username{
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
}

/* ---------- FOOTER GLOBAL ---------- */

.site-footer{
  background: var(--iron);
  color: var(--on-dark-dim);
  padding: 22px 32px;
}

.site-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.site-footer-copy{
  font-family: 'Inter', sans-serif;
}

.site-footer-links{
  display: flex;
  gap: 20px;
}

.site-footer-links a{
  color: var(--brass);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}

.site-footer-links a:hover{
  color: var(--ember-bright);
  text-decoration: underline;
}

@media (max-width: 575.98px){
  .site-footer-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- MENÚ LATERAL ----------
   Rail de 64px que, al pasar el ratón (o al recibir foco), se despliega a
   216px mostrando el texto. La franja del rail no se mueve: lo que crece es
   .sidebar-nav, posicionado en absoluto, así que el contenido no se desplaza. */
.app-sidebar{
  width: 64px;
  flex-shrink: 0;
  position: relative;
  z-index: 1020;
}

.sidebar-nav{
  position: absolute;
  inset: 0 auto 0 0;
  width: 64px;
  background: var(--iron);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 12px 12px;
  overflow: hidden;
  transition: width 0.18s ease, box-shadow 0.18s ease;
}

.app-sidebar:hover .sidebar-nav,
.app-sidebar:focus-within .sidebar-nav{
  width: 216px;
  box-shadow: 6px 0 24px var(--shadow-color);
}

.sidebar-icon{
  height: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--on-dark);
  opacity: 0.55;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sidebar-icon svg{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-label{
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.app-sidebar:hover .sidebar-label,
.app-sidebar:focus-within .sidebar-label{
  opacity: 1;
}

.sidebar-icon:hover{
  opacity: 1;
  background: var(--on-dark-wash);
}

.sidebar-icon:focus-visible{
  opacity: 1;
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.sidebar-icon.active{
  opacity: 1;
  background: var(--ember);
  color: var(--on-accent);
}

.info-note{
  background: var(--accent-wash);
  border-left: 3px solid var(--ember);
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--ink-faint);
  font-style: italic;
}

@media (max-width: 767.98px){
  .app-sidebar{
    display: none;
  }
}

/* ---------- NAV MÓVIL (barra inferior) ---------- */
.mobile-nav{
  display: none;
}

@media (max-width: 767.98px){
  .mobile-nav{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--iron);
    border-top: 1px solid var(--on-dark-wash);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--on-dark);
    opacity: 0.6;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
  }

  .mobile-nav-item svg{
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item.active{
    opacity: 1;
    color: var(--ember);
  }

  /* La barra inferior es fixed (fuera de flujo): tanto el contenido como el pie
     necesitan reservar su alto para que nada quede tapado. */
  .site-main{
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer{
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- DESGLOSE DE TOTALES (herrajes, facturas) ---------- */
.invoice-totals{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--parchment-dim);
}

.invoice-totals-row{
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-size: 14px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.invoice-totals-row span:last-child{
  min-width: 90px;
  text-align: right;
  color: var(--ink);
}

.invoice-totals-grand{
  border-top: 2px solid var(--iron);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
}

.invoice-totals-grand span:last-child{
  color: var(--ink);
}

/* ---------- CONTENEDOR DE PÁGINA (citas y herrajes) ---------- */
.appointment-page{
  padding: 32px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.appointment-page h1{
  font-size: 28px;
  margin-bottom: 12px;
}

/* En móvil el título se reduce para que "Herraje — {cliente}" no parta feo. */
@media (max-width: 575.98px){
  .appointment-page h1{
    font-size: 22px;
  }
}

/* En escritorio la ficha/formulario se presenta como una hoja centrada,
   para que la columna no quede flotando en el vacío. */
@media (min-width: 768px){
  .appointment-page{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 36px 40px;
    margin: 24px auto 48px;
    box-shadow: 0 8px 30px -14px var(--shadow-color);
  }
}

/* ---------- CUADRÍCULA DE IMÁGENES + LIGHTBOX (herrajes y citas) ---------- */
.appointment-image-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.appointment-image-item img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.job-image-thumb{
  cursor: zoom-in;
}

.image-lightbox{
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.image-lightbox[hidden]{
  display: none;
}

.image-lightbox img{
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.box-buttons {
  display: flex;
  align-items: center; 
  gap: 10px; 
}

.fiscal-reminder{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--ink);
}

.shoeing-job-actions .fiscal-reminder{
  margin-top: 20px;
}

@media (max-width: 575.98px){
  .fiscal-reminder{
    flex-direction: column;
    align-items: flex-start;
  }
}

.page-size-select-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-label{
  font-size: 13px;
  color: var(--ink-faint);
}

.page-size-select{
  width: auto;
  padding: 6px 34px 6px 10px !important;
  font-size: 14px;
}

/* ---------- BUSCADOR DE CLIENTE (autocompletar) ---------- */
.client-search-field{
  position: relative;
}

.client-search-results{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-color);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 4px;
}

.client-search-item{
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}

.client-search-item:hover{
  background: var(--parchment-dim);
}

.pagination-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.page-link{
  color: var(--ember);
  text-decoration: none;
  font-size: 13.5px;
}

.page-link:hover{
  text-decoration: underline;
}

.page-current{
  font-size: 13px;
  color: var(--ink-faint);
}
/* Aviso de anomalía en los registros de facturación.
   Deliberadamente NO es un alert de Bootstrap descartable: esto no se cierra con una X
   porque no es una notificación, es un estado que sigue ahí hasta que se arregle. */
.integrity-warning{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--error-line);
  border-left: 4px solid var(--error);
  border-radius: 8px;
  background: var(--error-wash);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.integrity-warning-icon{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--error);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}