/* AlTrabajo · Tokens y componentes de marca
   navy #0B1D33 · teal #00E5FF · grises F3F5F7/E5E7EB/CBD2D9/8892A0/475569
   Estados semánticos: hecho (verde) · cobrado (teal) · pendiente (naranja) */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/sora.woff2') format('woff2');
}

:root {
  --at-navy: #0B1D33;
  --at-teal: #00E5FF;
  --at-teal-ink: #007D91;      /* teal oscurecido para texto accesible sobre claro */
  --at-blanco: #FAFAFC;        /* blanco de marca */
  --at-g1: #F2F4F7;            /* gris claro (manual) */
  --at-g2: #E5E7EB;
  --at-g3: #CBD2D9;
  --at-g4: #8892A0;
  --at-g5: #475569;
  --at-neutro: #6B7280;        /* neutro de marca */
  --at-ok: #23C16B;            /* éxito · hecho/cobrado */
  --at-warn: #FFB020;          /* pendiente */
  --at-danger: #FF4D4F;        /* alerta · rechazada AEAT */

  --bs-body-font-family: 'Sora', Arial, sans-serif;
  --bs-body-color: var(--at-navy);
  --bs-body-bg: #FFFFFF;
}

body { font-family: 'Sora', Arial, sans-serif; background: var(--at-g1); }

/* --- Navbar / footer --- */
.at-navbar { background: var(--at-navy); }
.at-navbar .nav-link { color: rgba(255,255,255,.78); font-weight: 500; }
.at-navbar .nav-link:hover, .at-navbar .nav-link.active { color: #fff; }
.at-brand-text { font-weight: 700; letter-spacing: .02em; font-size: 1.15rem; }
/* Cuenta en la navbar: un botón compacto (icono + nombre SOLO si hay sitio) que
   despliega Configuración y Salir. Así la navbar cabe y adapta en vez de cortarse. */
.at-cuenta-wrap { flex: 0 0 auto; }
.at-cuenta { display: inline-flex; align-items: center; gap: .4rem; max-width: 240px;
  color: rgba(255,255,255,.80); background: transparent; border: 0; cursor: pointer;
  font-size: .9rem; line-height: 1; padding: .4rem .5rem; border-radius: var(--at-r-sm);
  transition: color .15s, background .15s; }
.at-cuenta:hover, .at-cuenta:focus-visible, .at-cuenta[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.10); }
.at-cuenta__ic { flex: 0 0 auto; opacity: .95; }
.at-cuenta__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.at-cuenta__chev { flex: 0 0 auto; opacity: .7; }
.at-cuenta--aviso { color: var(--at-warn); }
.at-cuenta-menu { min-width: 210px; }
.at-cuenta-menu .dropdown-header { max-width: 210px; font-weight: 700; color: var(--at-navy); }
/* El nombre solo cuando hay sitio de sobra; si la navbar va justa, solo el icono. */
@media (min-width: 1200px) and (max-width: 1479.98px) {
  .at-cuenta__nombre { display: none; }
  .at-navbar .navbar-nav .nav-link { padding-left: .55rem; padding-right: .55rem; }
}
/* Ya desplegada (móvil/tablet, < xl): la cuenta va a la izquierda como un item más. */
@media (max-width: 1199.98px) {
  .at-cuenta-wrap { margin-top: .4rem; }
  .at-cuenta { padding-left: .25rem; }
}
.at-footer { background: var(--at-navy); color: rgba(255,255,255,.65); }
.at-slash { width: 46px; height: 4px; background: var(--at-teal); transform: skewX(-30deg); }
/* Puente de vuelta al sitio público desde dentro de la app. */
.at-pie-enlaces {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 20px; margin-top: 12px; font-size: .85rem;
}
.at-pie-enlaces a { color: rgba(255,255,255,.6); text-decoration: none; }
.at-pie-enlaces a:hover, .at-pie-enlaces a:focus-visible { color: #fff; text-decoration: underline; }

/* --- Botones --- */
.btn-primary {
  --bs-btn-bg: var(--at-navy); --bs-btn-border-color: var(--at-navy);
  --bs-btn-hover-bg: #12294a; --bs-btn-hover-border-color: #12294a;
  --bs-btn-active-bg: #0a1a2e; --bs-btn-active-border-color: #0a1a2e;
}
.btn-accent {
  --bs-btn-bg: var(--at-teal); --bs-btn-border-color: var(--at-teal);
  --bs-btn-color: var(--at-navy); --bs-btn-hover-bg: #33eaff;
  --bs-btn-hover-border-color: #33eaff; --bs-btn-hover-color: var(--at-navy);
  font-weight: 600;
}

/* --- Cards --- */
.card { border-color: var(--at-g2); border-radius: 12px; }
.card-header { background: #fff; border-bottom-color: var(--at-g2); font-weight: 600; }

/* --- Estados del producto: hecho / cobrado / pendiente --- */
.at-stat { border-left: 4px solid var(--at-g3); }
.at-stat.ok    { border-left-color: var(--at-ok); }
.at-stat.money { border-left-color: var(--at-teal); }
.at-stat.warn  { border-left-color: var(--at-warn); }
.at-stat .num { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.at-stat .lbl { color: var(--at-g4); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }

.badge-estado { font-weight: 600; font-size: .74rem; padding: .32em .7em; border-radius: 999px; }
.badge-estado.abierto,
.badge-estado.borrador          { background: var(--at-g2); color: var(--at-g5); }
.badge-estado.pendiente_precio  { background: #FEF3C7; color: #92400E; }
.badge-estado.cerrado,
.badge-estado.cerrada,
.badge-estado.hecho             { background: #DCFCE7; color: #166534; }
.badge-estado.facturado,
.badge-estado.pagada            { background: #CFF9FE; color: #0E5866; }
.badge-estado.rectificativa     { background: #E0E7FF; color: #3730A3; }
.badge-estado.pendiente         { background: #FEF3C7; color: #92400E; }
.badge-estado.avisado           { background: #DBEAFE; color: #1E40AF; }
.badge-estado.cancelado         { background: var(--at-g2); color: var(--at-g4); text-decoration: line-through; }

/* --- Nodo de estado AEAT (lenguaje de marca: nodo = estado Verifactu) --- */
.nodo-aeat { display: inline-flex; align-items: center; gap: .45em; font-size: .82rem; color: var(--at-g5); }
.nodo-aeat::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--at-g3); flex: none;
}
.nodo-aeat.pendiente::before { background: var(--at-warn); }
.nodo-aeat.enviada::before   { background: var(--at-teal); }
.nodo-aeat.aceptada::before  { background: var(--at-ok); }
.nodo-aeat.aceptada_con_errores::before { background: var(--at-warn); box-shadow: 0 0 0 2px #FEF3C7; }
.nodo-aeat.rechazada::before { background: var(--at-danger); }

/* --- Tablas --- */
.table thead th {
  background: var(--at-navy); color: #fff; font-size: .8rem;
  font-weight: 600; letter-spacing: .04em; border: 0;
}
.table tbody td { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--at-g1); }

/* --- Formularios --- */
.form-control:focus, .form-select:focus {
  border-color: var(--at-teal);
  box-shadow: 0 0 0 .2rem rgba(0, 229, 255, .18);
}
.form-label { font-weight: 500; font-size: .88rem; }

/* --- Login --- */
.at-login-bg { background: var(--at-navy); min-height: 100vh; }
.at-login-card { max-width: 400px; border: 0; border-radius: 16px; }
/* Vuelta al sitio público desde las pantallas de acceso (login, alta, recuperar...). */
.at-volver {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.7); text-decoration: none; font-size: .9rem;
}
.at-volver:hover, .at-volver:focus-visible { color: #fff; text-decoration: underline; }
.at-marca-enlace { display: inline-block; text-decoration: none; }

/* Objetivos táctiles grandes (uso con guantes) */
.btn { min-height: 42px; }
.btn-sm { min-height: 33px; }
.form-control, .form-select { min-height: 44px; }
.form-control-sm, .form-select-sm { min-height: 34px; }

/* En táctil de verdad, los -sm también son diana completa; el font-size de
   1rem evita además el zoom automático de iOS al enfocar inputs pequeños. */
@media (hover: none) and (pointer: coarse) {
  .btn-sm { min-height: 44px; padding: .5rem .75rem; }
  .form-control-sm, .form-select-sm { min-height: 44px; font-size: 1rem; }
}

@media (max-width: 576px) {
  .at-stat .num { font-size: 1.5rem; }
}

/* --- Toasts de marca --- */
.at-toast { border: 1px solid var(--at-g2); border-left-width: 4px; border-radius: 10px; }
.at-toast .toast-body { font-size: .92rem; font-weight: 500; }
.at-toast-success { border-left-color: var(--at-ok); }
.at-toast-danger  { border-left-color: var(--at-danger); }
.at-toast-warning { border-left-color: var(--at-warn); }
.at-toast-info    { border-left-color: var(--at-teal); }

/* --- Modales de marca --- */
.modal-content { border: 0; border-radius: 14px; }
.modal-header { border-bottom-color: var(--at-g2); }
.modal-header .modal-title { font-weight: 600; font-size: 1.05rem; }
.modal-footer { border-top-color: var(--at-g2); }
.modal-header.at-modal-navy { background: var(--at-navy); color: #fff; }
.modal-header.at-modal-navy .btn-close { filter: invert(1); }

/* =====================================================================
   Refinado v2 — sistema visual de la aplicación
   Objetivo: que parezca un producto de pago, no un panel funcional.
   Se apoya en los tokens de arriba; no cambia la paleta de marca.
   ===================================================================== */

:root {
  --at-r-sm: 8px;
  --at-r: 12px;
  --at-r-lg: 16px;
  --at-sombra-1: 0 1px 2px rgba(11,29,51,.05);
  --at-sombra-2: 0 1px 2px rgba(11,29,51,.05), 0 6px 18px rgba(11,29,51,.07);
  --at-sombra-3: 0 2px 4px rgba(11,29,51,.06), 0 14px 34px rgba(11,29,51,.11);
  --at-borde: #E6EAEF;
}

body { color: var(--at-navy); -webkit-font-smoothing: antialiased; }
main.container-xl { padding-bottom: 3.5rem !important; }

/* --- Cabecera de sección: título, respiración y acción principal --- */
.at-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 4px 0 22px;
}
.at-cab h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.at-cab .at-cab__sub { color: var(--at-g4); font-size: .93rem; margin: 4px 0 0; }
.at-cab__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Tarjetas --- */
.card { border-color: var(--at-borde); border-radius: var(--at-r); box-shadow: var(--at-sombra-1); }
.card-header {
  background: #fff; border-bottom-color: var(--at-borde);
  font-weight: 600; font-size: .97rem; padding: .85rem 1.15rem;
}
.card-body { padding: 1.15rem; }

/* --- Tablas: más aire, cifras alineadas y cabecera fina --- */
.table { --bs-table-border-color: var(--at-borde); margin-bottom: 0; }
.table thead th {
  background: var(--at-g1); color: var(--at-g5);
  font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--at-borde); padding: .72rem .95rem; white-space: nowrap;
}
.table tbody td { padding: .78rem .95rem; border-color: var(--at-borde); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: #FAFCFD; }
.table .num, .table .importe { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-title { font-weight: 600; color: var(--at-navy); text-decoration: none; }
.table .cell-title:hover { color: var(--at-teal-ink); }
.table .cell-meta { display: block; color: var(--at-g4); font-size: .82rem; margin-top: 1px; }
.tabla-tarjeta { border: 1px solid var(--at-borde); border-radius: var(--at-r); overflow: hidden; background: #fff; box-shadow: var(--at-sombra-1); }

/* --- Píldoras de filtro --- */
.at-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.at-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--at-borde); background: #fff; color: var(--at-g5);
  border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 500;
  text-decoration: none; transition: .15s;
}
.at-filtro:hover { border-color: var(--at-g3); color: var(--at-navy); }
.at-filtro.es-activo { background: var(--at-navy); border-color: var(--at-navy); color: #fff; }
.at-filtro__n {
  font-size: .74rem; font-weight: 700; background: var(--at-g1); color: var(--at-g5);
  border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.at-filtro.es-activo .at-filtro__n { background: rgba(255,255,255,.18); color: #fff; }

/* --- Estado vacío --- */
.at-empty { text-align: center; padding: 54px 24px; }
.at-empty__icono {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--at-g1); color: var(--at-g4);
}
.at-empty h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 6px; }
.at-empty p { color: var(--at-g4); max-width: 44ch; margin: 0 auto 18px; font-size: .94rem; }

/* --- Formularios --- */
.form-label { font-weight: 550; font-size: .875rem; color: var(--at-g5); margin-bottom: .35rem; }
.form-control, .form-select {
  border-color: var(--at-g3); border-radius: var(--at-r-sm); font-size: .95rem;
}
.form-control::placeholder { color: #A9B4C0; }
.form-text { font-size: .82rem; color: var(--at-g4); }
.input-group-text { background: var(--at-g1); border-color: var(--at-g3); color: var(--at-g5); font-size: .9rem; }

/* --- Botones --- */
.btn { border-radius: var(--at-r-sm); font-weight: 550; }
.btn-primary { box-shadow: var(--at-sombra-1); }
.btn-accent { box-shadow: 0 1px 2px rgba(0,229,255,.25); }
.btn-outline-secondary { --bs-btn-color: var(--at-g5); --bs-btn-border-color: var(--at-g3); --bs-btn-hover-bg: var(--at-g1); --bs-btn-hover-color: var(--at-navy); --bs-btn-hover-border-color: var(--at-g3); }
.btn-icono { display: inline-flex; align-items: center; gap: 7px; }

/* --- Acciones de fila: discretas hasta que pasas por encima --- */
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
.acciones-fila .btn { opacity: .72; transition: opacity .15s; }
tr:hover .acciones-fila .btn, .acciones-fila .btn:focus-visible { opacity: 1; }

/* --- Barra de acciones pegada abajo en formularios largos --- */
.at-barra-acciones {
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-top: 1px solid var(--at-borde); padding: 12px 0; margin-top: 22px;
  display: flex; gap: 10px; justify-content: flex-end;
}

/* --- Migas de pan --- */
.at-migas { font-size: .85rem; color: var(--at-g4); margin-bottom: 10px; }
.at-migas a { color: var(--at-g4); text-decoration: none; }
.at-migas a:hover { color: var(--at-teal-ink); }

/* --- Iniciales de cliente --- */
.at-iniciales {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--at-g1);
  color: var(--at-g5); font-weight: 650; font-size: .8rem; letter-spacing: .02em;
}

/* --- Estados que faltaban --- */
.badge-estado.enviado, .badge-estado.respondido { background: #DBEAFE; color: #1E40AF; }
.badge-estado.esperando { background: #FEF3C7; color: #92400E; }
.badge-estado.aceptado  { background: #DCFCE7; color: #166534; }
.badge-estado.rechazado { background: #FEE2E2; color: #991B1B; }
.badge-estado.caducado  { background: var(--at-g2); color: var(--at-g4); }

/* --- Enfoque visible (accesibilidad) --- */
a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--at-teal-ink); outline-offset: 2px;
}

@media (max-width: 576px) {
  .at-cab { flex-direction: column; align-items: stretch; }
  .at-cab__acciones .btn { flex: 1; }
  .table thead th, .table tbody td { padding: .62rem .7rem; }
}

/* --- Primeros pasos: recordatorio en el panel ----------------------------- */
.pp-tarjeta {
  background: #fff; border: 1px solid var(--at-g2); border-left: 4px solid var(--at-teal-ink);
  border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 1.1rem;
  box-shadow: 0 6px 18px rgba(11, 29, 51, .05);
}
.pp-tarjeta__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pp-tarjeta h2 { font-size: 1.02rem; font-weight: 700; color: var(--at-navy); margin: 0; }
.pp-tarjeta p { color: var(--at-g4); font-size: .9rem; margin: .15rem 0 0; }
.pp-tarjeta__acciones { display: flex; gap: 8px; align-items: center; }
.pp-barra { height: 6px; border-radius: 999px; background: var(--at-g1); margin: .8rem 0 .9rem; overflow: hidden; }
.pp-barra span { display: block; height: 100%; background: var(--at-teal); }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pp-lista li { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--at-navy); }
.pp-lista li.es-hecho { color: var(--at-g4); }
.pp-lista li.es-hecho span:last-child { text-decoration: line-through; }
.pp-lista a { color: var(--at-teal-ink); text-decoration: none; font-weight: 500; }
.pp-lista a:hover { text-decoration: underline; }
.pp-marca {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--at-g3); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.es-hecho .pp-marca { background: #10B981; border-color: #10B981; }