/*
 * Identidad de Fresco y Cocinado sobre Bootstrap 5.3 (public/lib).
 *
 * Colores y tipografías salen de frescoycocinado.com: rojo tomate, ladrillo y
 * granate; Manrope para el texto e Instrument Serif para los titulares. Aquí
 * la serif se reserva para el nombre del mes y la pantalla de acceso: es el
 * único gesto llamativo, todo lo demás es sobrio.
 *
 * La CSP no admite estilos en línea: cualquier ajuste va en este fichero,
 * nunca en un atributo style. Las fuentes se sirven desde el propio portal
 * (public/lib/fonts, licencia OFL) por el mismo motivo.
 */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/lib/fonts/manrope-5.3.0/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("/lib/fonts/instrument-serif-5.3.0/instrument-serif-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */

:root {
    /* Marca */
    --fyc-tomato: #c03622;
    --fyc-brick: #902f1f;
    --fyc-maroon: #520e03;
    --fyc-blush: #ffedea;
    --fyc-orange: #fb8e28;

    /* Neutros: fondo gris cálido, sin crema */
    --fyc-ink: #2b2220;
    --fyc-muted: #6b5f5c;
    --fyc-line: #e6dfdd;
    --fyc-page: #f6f4f3;
    --fyc-surface: #ffffff;

    /* Estados */
    --fyc-pending: #fb8e28;
    --fyc-pending-soft: #fff1e2;
    --fyc-pending-ink: #7a3a00;
    --fyc-done: #3c7a4b;
    --fyc-done-soft: #e8f2ea;
    --fyc-danger: #a42a1a;

    --fyc-font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fyc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --fyc-radius: 0.625rem;

    /* Bootstrap hereda estos valores */
    --bs-body-font-family: var(--fyc-font-text);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--fyc-ink);
    --bs-body-bg: var(--fyc-page);
    --bs-secondary-color: var(--fyc-muted);
    --bs-tertiary-bg: var(--fyc-page);
    --bs-border-color: var(--fyc-line);
    --bs-border-radius: var(--fyc-radius);
    --bs-link-color: var(--fyc-brick);
    --bs-link-color-rgb: 144, 47, 31;
    --bs-link-hover-color: var(--fyc-maroon);
    --bs-link-hover-color-rgb: 82, 14, 3;
    --bs-emphasis-color: var(--fyc-maroon);
    --bs-focus-ring-color: rgba(192, 54, 34, 0.35);
    --bs-heading-color: var(--fyc-maroon);
}

body {
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

::selection {
    background: var(--fyc-blush);
    color: var(--fyc-maroon);
}

:focus-visible {
    outline: 3px solid rgba(192, 54, 34, 0.45);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Botones: píldoras, como en la web de la marca
   ------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(192, 54, 34, 0.3);
}

.btn-sm {
    --bs-btn-padding-x: 0.875rem;
}

.btn-primary {
    --bs-btn-bg: var(--fyc-tomato);
    --bs-btn-border-color: var(--fyc-tomato);
    --bs-btn-hover-bg: var(--fyc-brick);
    --bs-btn-hover-border-color: var(--fyc-brick);
    --bs-btn-active-bg: var(--fyc-maroon);
    --bs-btn-active-border-color: var(--fyc-maroon);
    --bs-btn-disabled-bg: var(--fyc-tomato);
    --bs-btn-disabled-border-color: var(--fyc-tomato);
}

.btn-outline-primary {
    --bs-btn-color: var(--fyc-brick);
    --bs-btn-border-color: var(--fyc-line);
    --bs-btn-bg: var(--fyc-surface);
    --bs-btn-hover-color: var(--fyc-maroon);
    --bs-btn-hover-bg: var(--fyc-blush);
    --bs-btn-hover-border-color: #f3c9c1;
    --bs-btn-active-color: var(--fyc-maroon);
    --bs-btn-active-bg: var(--fyc-blush);
    --bs-btn-active-border-color: #f3c9c1;
}

.btn-outline-secondary {
    --bs-btn-color: var(--fyc-ink);
    --bs-btn-border-color: var(--fyc-line);
    --bs-btn-bg: var(--fyc-surface);
    --bs-btn-hover-color: var(--fyc-ink);
    --bs-btn-hover-bg: var(--fyc-page);
    --bs-btn-hover-border-color: #d6ccc9;
    --bs-btn-active-color: var(--fyc-ink);
    --bs-btn-active-bg: var(--fyc-page);
    --bs-btn-active-border-color: #d6ccc9;
}

.btn-outline-danger {
    --bs-btn-color: var(--fyc-danger);
    --bs-btn-border-color: var(--fyc-line);
    --bs-btn-bg: var(--fyc-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fyc-danger);
    --bs-btn-hover-border-color: var(--fyc-danger);
}

.btn-success,
.btn-publish {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fyc-tomato);
    --bs-btn-border-color: var(--fyc-tomato);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fyc-brick);
    --bs-btn-hover-border-color: var(--fyc-brick);
    --bs-btn-active-bg: var(--fyc-maroon);
    --bs-btn-active-border-color: var(--fyc-maroon);
}

.btn-link {
    --bs-btn-color: var(--fyc-brick);
    --bs-btn-hover-color: var(--fyc-maroon);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Avisos y formularios
   ------------------------------------------------------------------------- */

.alert {
    --bs-alert-border-radius: var(--fyc-radius);
    border-width: 0 0 0 4px;
    font-weight: 500;
}

.alert-success {
    --bs-alert-color: #1f4a2a;
    --bs-alert-bg: var(--fyc-done-soft);
    --bs-alert-border-color: var(--fyc-done);
}

.alert-warning {
    --bs-alert-color: var(--fyc-pending-ink);
    --bs-alert-bg: var(--fyc-pending-soft);
    --bs-alert-border-color: var(--fyc-pending);
}

.alert-danger {
    --bs-alert-color: var(--fyc-maroon);
    --bs-alert-bg: var(--fyc-blush);
    --bs-alert-border-color: var(--fyc-tomato);
}

.alert-info {
    --bs-alert-color: var(--fyc-ink);
    --bs-alert-bg: #f1eeed;
    --bs-alert-border-color: #bfb3b0;
}

.form-control,
.form-select {
    background-color: var(--fyc-surface);
    border-color: #d9d0cd;
    padding-block: 0.625rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--fyc-surface);
    border-color: var(--fyc-tomato);
    box-shadow: 0 0 0 0.25rem rgba(192, 54, 34, 0.18);
}

.form-label {
    font-weight: 600;
    color: var(--fyc-ink);
}

/* ---------------------------------------------------------------------------
   Estructura: cabecera y superficies
   ------------------------------------------------------------------------- */

.site-header {
    background: var(--fyc-surface);
    border-bottom: 1px solid var(--fyc-line);
}

.site-header .navbar {
    --bs-navbar-padding-y: 0.625rem;
    --bs-navbar-color: var(--fyc-muted);
    --bs-navbar-hover-color: var(--fyc-maroon);
    --bs-navbar-active-color: var(--fyc-maroon);
    --bs-navbar-nav-link-padding-x: 0.875rem;
}

.site-header .nav-link {
    font-weight: 600;
    border-radius: 999px;
}

/* La sección actual: la marca cada página con {block section}. */
.section-panel .nav-panel,
.section-tipos .nav-tipos,
.section-cuentas .nav-cuentas,
.section-menus .nav-menus {
    color: var(--fyc-maroon);
    background: var(--fyc-blush);
}

.brand-logo {
    height: 44px;
    width: auto;
    display: block;
}

.page {
    padding-block: 2rem 4rem;
}

.surface {
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
}

.page-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-lede {
    color: var(--fyc-muted);
    margin-bottom: 1.75rem;
    max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   Panel del mes
   ------------------------------------------------------------------------- */

/* El mes es el protagonista: nombre en serif, grande, sobre el rosa de marca. */
.month-hero {
    background: var(--fyc-blush);
    border-radius: calc(var(--fyc-radius) * 1.6);
    padding: 1.5rem 1.75rem 1.75rem;
    margin-bottom: 1.5rem;
}

.month-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.month-nav a,
.month-nav span {
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.month-nav a {
    color: var(--fyc-brick);
}

.month-nav a:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--fyc-maroon);
}

.month-nav span {
    color: rgba(82, 14, 3, 0.3);
}

.month-title {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 5.25rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--fyc-maroon);
    margin: 0 0 1.25rem;
}

.month-title .year {
    white-space: nowrap;
}

/* Un tramo por tipo de menú: la lista que antes vivía en la cabeza de quien
   los enviaba. Una sola barra partida por líneas finas, para que se lea igual
   con 4 tipos que con 30. */
.month-progress {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--fyc-blush);
    margin-bottom: 0.875rem;
}

.month-progress .segment {
    flex: 1 1 0;
    min-width: 2px;
    background: var(--fyc-done);
}

.month-progress .segment.is-pending {
    background: #fbd3ad;
}

.month-status {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fyc-maroon);
    margin: 0;
}

.month-status .missing {
    color: var(--fyc-pending-ink);
}

/* La lista de huecos: una fila por tipo, sin cabeceras de tabla. */
.slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
}

.slot {
    display: grid;
    grid-template-columns: minmax(9rem, 1.1fr) minmax(8rem, 0.8fr) minmax(12rem, 1.6fr) auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fyc-line);
    border-left: 4px solid transparent;
}

.slot:first-child {
    border-top: 0;
}

.slot.is-pending {
    border-left-color: var(--fyc-pending);
    background: #fffaf4;
}

.slot-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--fyc-ink);
}

.slot-state {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.state {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.9375rem;
}

.state::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex: none;
}

.state-done {
    color: var(--fyc-done);
}

.state-done::before {
    background: var(--fyc-done);
}

.state-pending {
    color: var(--fyc-pending-ink);
}

.state-pending::before {
    background: var(--fyc-surface);
    box-shadow: inset 0 0 0 2px var(--fyc-pending);
}

.state-off {
    color: var(--fyc-muted);
}

.state-off::before {
    background: #bfb3b0;
}

.state-note {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

.slot-doc {
    min-width: 0;
}

.slot-doc a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.slot-doc .when {
    display: block;
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

.slot-doc .hint {
    color: var(--fyc-muted);
}

/* Subida: un solo botón. El input de fichero queda oculto pero accesible por
   teclado; con JS la fila se envía al elegir el fichero y el botón «Enviar»
   sobra. Sin JS se ve y funciona como siempre. */
.upload-slot {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.file-pick {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.file-pick input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    cursor: pointer;
}

.file-pick:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(192, 54, 34, 0.3);
}

.js .upload-send {
    display: none;
}

.slot.drag-over {
    outline: 2px dashed var(--fyc-tomato);
    outline-offset: -6px;
    background: var(--fyc-blush);
}

@media (max-width: 767.98px) {
    .month-hero {
        padding: 1.25rem;
    }

    .slot {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name state"
            "doc doc"
            "upload upload";
    }

    .slot-name { grid-area: name; }
    .slot-state { grid-area: state; align-items: flex-end; }
    .slot-doc { grid-area: doc; }
    .upload-slot { grid-area: upload; justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   Revisión de la subida
   ------------------------------------------------------------------------- */

.review-target {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1;
    color: var(--fyc-maroon);
    margin: 0 0 0.5rem;
}

.pdf-frame {
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
}

.pdf-preview {
    width: 100%;
    height: 72vh;
    border: 0;
    display: block;
    background: #eeeae9;
}

.review-actions {
    position: sticky;
    top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Tablas (cuentas e historial)
   ------------------------------------------------------------------------- */

.table {
    --bs-table-bg: var(--fyc-surface);
    --bs-table-color: var(--fyc-ink);
    --bs-table-border-color: var(--fyc-line);
    margin-bottom: 0;
}

.table > thead th {
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fyc-muted);
    background: var(--fyc-surface);
    border-bottom-width: 1px;
}

.table > :not(caption) > * > * {
    padding: 0.875rem 1rem;
}

.sync-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.sync-bar p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Rejilla del cliente
   ------------------------------------------------------------------------- */

/* Un bloque por mes, sin tablas: en el móvil es la lectura natural. El mes en
   curso se destaca con el rosa de la marca, como el panel del personal. */
.menu-months {
    display: grid;
    gap: 1.5rem;
}

.menu-month {
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
}

.menu-month-title {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: var(--fyc-maroon);
    margin: 0;
    padding: 1.125rem 1.25rem 1rem;
    border-bottom: 1px solid var(--fyc-line);
}

/* El mes siguiente va debajo del actual y más discreto: suele estar aún sin
   publicar. */
.menu-month.is-upcoming .menu-month-title {
    font-size: 1.625rem;
    color: var(--fyc-muted);
}

.menu-month.is-current .menu-month-title {
    background: var(--fyc-blush);
    border-bottom-color: #f3c9c1;
    font-size: 2.5rem;
}

.menu-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-entry {
    display: grid;
    /* Tipo | fecha y «Nuevo» | botón, en una línea. Un hueco sin publicar
       sólo tiene dos: su texto ocupa las dos últimas columnas. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.375rem 1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fyc-line);
}

.menu-entry:first-child {
    border-top: 0;
}

.menu-entry-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--fyc-ink);
}

.menu-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.badge-new {
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--fyc-maroon);
    background: var(--fyc-blush);
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
}

.menu-entry-date {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

.menu-entry-pending {
    grid-column: 2 / -1;
    justify-self: end;
    font-weight: 600;
    color: var(--fyc-muted);
}

@media (max-width: 575.98px) {
    .menu-entry {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .menu-entry-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .menu-entry .btn {
        justify-self: start;
    }

    .menu-entry-pending {
        grid-column: auto;
        justify-self: start;
    }
}

/* ---------------------------------------------------------------------------
   Tipos de menú: revisión del catálogo
   ------------------------------------------------------------------------- */

/* Un título por grupo (sin revisar / publican / no publican): sin tarjetas,
   sólo el encabezado semántico sobre la lista. */
.type-group-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fyc-maroon);
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.75rem;
}

.type-group-title:first-of-type {
    margin-top: 0;
}

/* Una fila por tipo activo. En el móvil, cada tipo es un bloque apilado: nada
   de tablas que obliguen a desplazarse de lado. */
.type-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
}

.type-row {
    display: grid;
    grid-template-columns: minmax(11rem, 1.2fr) minmax(14rem, 1.4fr) minmax(10rem, 1fr) minmax(6rem, 0.5fr);
    align-items: start;
    gap: 0.625rem 1.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fyc-line);
    border-left: 4px solid transparent;
}

.type-row:first-child {
    border-top: 0;
}

/* Los sin revisar van arriba y marcados: el borde naranja es la señal de que
   falta una decisión, no un hueco pendiente. */
.type-row.is-unreviewed {
    border-left-color: var(--fyc-pending);
    background: #fffaf4;
}

/* Una fila que no ha superado la validación: el error va bajo sus campos. */
.type-row.has-error {
    border-left-color: var(--fyc-danger);
    background: #fff7f6;
}

.type-error {
    grid-column: 1 / -1;
    color: var(--fyc-maroon);
    background: var(--fyc-blush);
    border-left: 4px solid var(--fyc-tomato);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.9375rem;
}

/* El aviso de cabecera cuando el guardado falla: cada tipo con error enlaza
   a su fila, que puede estar al final de la lista. */
.type-error-links {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.type-error-links a {
    color: var(--fyc-maroon);
    font-weight: 600;
}

.type-error-links li + li {
    margin-top: 0.125rem;
}

.type-who {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.type-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--fyc-ink);
    overflow-wrap: anywhere;
}

.type-count {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

.type-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.type-status .form-check {
    min-height: 0;
    margin: 0;
}

.type-status .form-check-input {
    margin-top: 0.25em;
}

.type-display label,
.type-order label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fyc-muted);
    margin-bottom: 0.25rem;
}

.type-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 991.98px) {
    .type-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "who who"
            "status status"
            "display order";
    }

    .type-who { grid-area: who; }
    .type-status { grid-area: status; }
    .type-display { grid-area: display; }
    .type-order { grid-area: order; }
}

@media (max-width: 575.98px) {
    .type-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "who"
            "status"
            "display"
            "order";
    }

    .type-actions {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Tipos de menú del cliente: excepciones sobre las asignaciones de cocina
   ------------------------------------------------------------------------- */

.client-type-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
}

.client-type-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 1.25rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--fyc-line);
}

.client-type-row:first-child {
    border-top: 0;
}

/* Un cambio de cocina sin revisar: la fila se destaca en naranja, como el
   resto de pendientes, hasta que guardar lo da por revisado. */
.client-type-row.has-cocina-change {
    background: #fffaf4;
    border-left: 4px solid var(--fyc-pending);
    padding-left: calc(1.25rem - 4px);
}

.client-type-receives {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.client-type-receives input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    accent-color: var(--fyc-tomato);
}

.client-type-name {
    font-weight: 700;
    color: var(--fyc-ink);
}

.client-type-origin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    justify-content: flex-end;
    text-align: right;
}

.client-type-origin .state-note {
    white-space: normal;
}

@media (max-width: 575.98px) {
    .client-type-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .client-type-origin {
        justify-content: flex-start;
        text-align: left;
        padding-left: 1.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Cuentas de acceso: buscador, filtros, lista y paginación
   ------------------------------------------------------------------------- */

.account-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.account-search .form-control {
    flex: 1 1 18rem;
    max-width: 32rem;
}

.account-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.account-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--fyc-line);
    border-radius: 999px;
    background: var(--fyc-surface);
    color: var(--fyc-ink);
    font-weight: 600;
    text-decoration: none;
}

.account-filter:hover {
    border-color: #f3c9c1;
    color: var(--fyc-maroon);
}

.account-filter .count {
    color: var(--fyc-muted);
    font-weight: 500;
}

.account-filter.is-current {
    background: var(--fyc-blush);
    border-color: #f3c9c1;
    color: var(--fyc-maroon);
}

.account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
}

.account-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 0.9fr) auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--fyc-line);
}

.account-row:first-child {
    border-top: 0;
}

.account-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-name {
    font-weight: 700;
    color: var(--fyc-ink);
}

.account-email {
    font-size: 0.875rem;
    color: var(--fyc-muted);
    overflow-wrap: anywhere;
}

.account-state {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

/* El alta se despliega en la propia fila, sin JavaScript. */
.account-create summary {
    list-style: none;
}

.account-create summary::-webkit-details-marker {
    display: none;
}

.account-create[open] summary {
    display: none;
}

.account-create-form {
    width: min(100%, 22rem);
}

.account-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--fyc-muted);
}

@media (max-width: 767.98px) {
    .account-row {
        grid-template-columns: 1fr;
    }

    .account-actions {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Acceso
   ------------------------------------------------------------------------- */

.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--fyc-page);
}

.login-card {
    width: min(100%, 26rem);
    padding: 2.25rem 2rem 2rem;
}

.login-card .brand-logo {
    height: 64px;
    margin-bottom: 1.5rem;
}

.login-title {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--fyc-maroon);
    margin-bottom: 0.5rem;
}

/* Contraseña generada: grande y espaciada para dictarla sin errores. */
.password {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--fyc-maroon);
    background: var(--fyc-blush);
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    /* Un clic la selecciona entera: el doble clic se para en los guiones. */
    user-select: all;
    cursor: pointer;
    border: 1px dashed transparent;
}

.password:hover {
    border-color: var(--fyc-tomato);
}

/* La selección general es rosa sobre granate, los mismos colores de la caja:
 * aquí no se vería. */
.password::selection {
    background: var(--fyc-tomato);
    color: #fff;
}

/* «Copiar» necesita JS y el portapapeles: sin ellos, no se muestra. */
.copy-button {
    display: none;
}

.js .copy-button.copy-ready {
    display: inline-block;
}

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