/*
 * Identidad de Fresco y Cocinado sobre Bootstrap 5.3 (public/lib), con el
 * aspecto del prototipo aprobado (plans/2026-10-15-prototipo.html).
 *
 * Colores y tipografías salen de frescoycocinado.com: rojo tomate, ladrillo y
 * granate; Manrope para el texto e Instrument Serif para los titulares. El
 * marco es de la marca y cada empresa sólo pone su acento (variables
 * --fyc-accent-*, que fija /empresa.css) y su logotipo.
 *
 * La CSP no admite estilos en línea: cualquier ajuste va en este fichero,
 * nunca en un atributo style. Sin sombras, sin degradados, sin modo oscuro.
 * Las fuentes se sirven desde el propio sitio (public/lib/fonts, OFL).
 */

@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;

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

    /* Estados, del prototipo */
    --fyc-ok: #3c7a4b;
    --fyc-ok-soft: #e8f2ea;
    --fyc-warn: #7a3a00;
    --fyc-warn-soft: #fff1e2;
    --fyc-danger: #a42a1a;
    --fyc-danger-soft: #fdecea;

    /* Acento de la empresa. app.css trae el valor por defecto (el ladrillo de
       la marca); /empresa.css lo sobreescribe cuando hay color en la base. */
    --fyc-accent: #902f1f;
    --fyc-accent-ink: #ffffff;
    --fyc-accent-soft: #f2e6e4;

    --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;
    --fyc-width: 1180px;

    /* Bootstrap hereda estos valores */
    --bs-body-font-family: var(--fyc-font-text);
    --bs-body-font-size: 0.9375rem;
    --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 {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* Cifras alineadas en columnas: importes, cantidades, fechas. */
.tnum {
    font-variant-numeric: tabular-nums;
}

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

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fyc-tomato) 55%, transparent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Botones: píldoras, sobre Bootstrap
   ------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 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);
}

/* Secundario: con borde, fondo blanco, texto ladrillo. */
.btn-outline-secondary {
    --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;
}

/* Botón de bloque de los formularios y acciones principales. */
.btn-block {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 0.9375rem;
}

/* Enlace discreto dentro de una caja (p. ej. «Quitar filtro»). */
.linkish {
    border: 0;
    background: none;
    color: var(--fyc-brick);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.linkish:hover {
    color: var(--fyc-maroon);
}

/* ---------------------------------------------------------------------------
   Marco: cabecera de empresa, pie
   ------------------------------------------------------------------------- */

/* Cabecera de empresa: fondo del acento, logotipo en placa blanca y nombre.
   La de personal es la misma estructura en rojo tomate. */
.app-head {
    background: var(--fyc-accent);
    color: var(--fyc-accent-ink);
}

.app-head-staff {
    background: var(--fyc-tomato);
    color: #fff;
}

.app-head-inner {
    max-width: var(--fyc-width);
    margin-inline: auto;
    padding: 0.875rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Placa blanca con el logotipo o, sin fichero, con las iniciales. El alto es
   fijo (40 px) y el ancho se adapta al logotipo. */
.logo {
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--fyc-accent-ink);
    color: var(--fyc-accent);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.875rem;
    flex: none;
    padding-inline: 4px;
    overflow: hidden;
}

.logo img {
    height: 40px;
    width: auto;
    display: block;
}

.app-head-staff .logo {
    color: var(--fyc-tomato);
}

.head-text {
    min-width: 0;
    flex: 1;
}

/* Los nombres largos («TeamSystem | Software Delsol») parten, no desbordan. */
.head-text .company {
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.head-text .by {
    font-size: 0.75rem;
    opacity: 0.85;
}

.head-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Enlace de la cabecera, sobre el acento. */
.pill-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
}

.pill-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.app-main {
    max-width: var(--fyc-width);
    margin-inline: auto;
    padding: 1.125rem;
    display: grid;
    gap: 1.125rem;
}

/* Los hijos de una rejilla no encogen por debajo de su contenido por
   defecto: sin esto, la tabla del pedido (min-width 560px) ensancharía la
   página en el móvil en vez de desplazarse dentro de su caja. */
.app-main > * {
    min-width: 0;
}

.app-foot {
    border-top: 1px solid var(--fyc-line);
    font-size: 0.78125rem;
    color: var(--fyc-muted);
}

.app-foot-inner {
    max-width: var(--fyc-width);
    margin-inline: auto;
    padding: 1rem 1.125rem 1.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: space-between;
}

.app-foot a {
    color: inherit;
}

.wordmark {
    font-family: var(--fyc-font-display);
    font-size: 1.125rem;
    color: var(--fyc-tomato);
}

/* ---------------------------------------------------------------------------
   Titular de semana
   ------------------------------------------------------------------------- */

.week {
    display: grid;
    gap: 4px;
}

.eyebrow {
    font-size: 0.71875rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--fyc-muted);
}

/* El titular de la semana es uno de los pocos gestos de serif de la marca. */
.week h1 {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    color: var(--fyc-maroon);
}

.week-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* La semana activa en el cambio de semana. Los enlaces de la semana llevan
   aria-current, que es lo que les corresponde a enlaces (los botones del
   prototipo usaban aria-pressed); el aspecto es el mismo. */
.btn[aria-pressed="true"],
.btn[aria-current="page"] {
    --bs-btn-bg: var(--fyc-tomato);
    --bs-btn-border-color: var(--fyc-tomato);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--fyc-brick);
    --bs-btn-hover-border-color: var(--fyc-brick);
    --bs-btn-hover-color: #fff;
}

/* ---------------------------------------------------------------------------
   Filtro de alérgenos: fichas
   ------------------------------------------------------------------------- */

.filters {
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    padding: 0.75rem 0.875rem;
    display: grid;
    gap: 8px;
}

.filters-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.filters-top strong {
    font-size: 0.875rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Ficha del filtro: botón con aria-pressed. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fyc-line);
    background: var(--fyc-page);
    border-radius: 999px;
    padding: 4px 10px 4px 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--fyc-ink);
}

.chip[aria-pressed="true"] {
    border-color: var(--fyc-danger);
    background: var(--fyc-danger-soft);
    color: var(--fyc-danger);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.78125rem;
    color: var(--fyc-muted);
}

.legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.dot-rec {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--fyc-ok);
}

/* ---------------------------------------------------------------------------
   Iconos de alérgenos y fichas de los platos
   ------------------------------------------------------------------------- */

/* El bloque del filtro y las pestañas nacen hidden y los muestra app.js.
   La regla del móvil de abajo los pondría en flex aunque llevaran hidden
   (los estilos del autor ganan a los del navegador), así que aquí se deja
   claro: hidden es hidden. */
.filters[hidden],
.day-tabs[hidden] {
    display: none !important;
}

/* El icono va en currentColor: gris en la ficha normal, rojo en la
   resaltada, y el color que sea donde se use. Siempre con el nombre en
   texto al lado; el icono es aria-hidden y nunca es la única pista. */
.al-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.al {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71875rem;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--fyc-line);
    color: var(--fyc-muted);
    background: var(--fyc-surface);
}

.al .al-icon {
    width: 14px;
    height: 14px;
}

.al.hit {
    border-color: var(--fyc-danger);
    color: var(--fyc-danger);
    font-weight: 700;
}

.none {
    font-size: 0.75rem;
    color: var(--fyc-ok);
}

/* ---------------------------------------------------------------------------
   Días y platos
   ------------------------------------------------------------------------- */

/* En el móvil, una pestaña por día; en escritorio, columnas. */
.day-tabs {
    display: none;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.day-tab {
    flex: none;
    border: 1px solid var(--fyc-line);
    background: var(--fyc-surface);
    border-radius: 12px;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    min-width: 64px;
    color: var(--fyc-ink);
}

.day-tab b {
    display: block;
    font-size: 0.8125rem;
}

.day-tab small {
    color: var(--fyc-muted);
    font-size: 0.75rem;
}

.day-tab[aria-pressed="true"] {
    border-color: var(--fyc-accent);
    box-shadow: inset 0 0 0 1px var(--fyc-accent);
}

.day-tab.today small {
    color: var(--fyc-accent);
    font-weight: 700;
}

/* La semana siempre en una fila: una columna por día de servicio, nunca
   partida (con columnas de ancho mínimo fijo, cinco días salían 4 + 1 y
   siete, 4 + 3). Caben siete a 150 px en el ancho máximo; si la ventana es
   más estrecha, la fila se desplaza dentro de su caja, no la página. */
.days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.days > .day {
    scroll-snap-align: start;
}

.day {
    background: var(--fyc-surface);
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Hoy: la cabecera del día en el color de la empresa, sin etiqueta aparte
   («Hoy, 16 oct» en el sitio de la fecha), para que todas las cabeceras
   midan lo mismo y los grupos queden alineados entre columnas. */
.day.today {
    border-color: var(--fyc-accent);
}

.day.today .day-head {
    background: var(--fyc-accent);
    border-bottom-color: var(--fyc-accent);
}

.day.today .day-head h2,
.day.today .day-head .date {
    color: var(--fyc-accent-ink);
}

.day.today .day-head .date {
    font-weight: 700;
}

.day-head {
    padding: 0.75rem 0.875rem 0.625rem;
    border-bottom: 1px solid var(--fyc-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.day-head h2 {
    font-size: 1.0625rem;
}

.day-head .date {
    color: var(--fyc-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.course {
    padding: 0.625rem 0.875rem 0.25rem;
}

.course h3 {
    font-size: 0.71875rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--fyc-muted);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.dishes {
    list-style: none;
    margin: 6px 0 8px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dish {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.dish .name {
    font-weight: 600;
    font-size: 0.90625rem;
    line-height: 1.35;
}

/* La guarnición, si el plato la trae, debajo del nombre. */
.dish .garnish {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

/* El ECO del plato ecológico, verde como el recomendado. */
.tag.eco {
    color: var(--fyc-ok);
}

.dish.rec {
    background: var(--fyc-ok-soft);
}

.dish.rec .tag {
    color: var(--fyc-ok);
}

.dish.hit {
    border-color: var(--fyc-danger);
    background: var(--fyc-danger-soft);
}

.dish .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.tag {
    font-size: 0.71875rem;
    font-weight: 700;
}

.warn-line {
    font-size: 0.75rem;
    color: var(--fyc-danger);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Avisos: .notice sobre .alert de Bootstrap
   ------------------------------------------------------------------------- */

.notice {
    --bs-alert-border-radius: var(--fyc-radius);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 0;
}

.notice .notice-icon {
    flex: none;
}

.notice strong {
    display: block;
}

.notice-info {
    --bs-alert-color: var(--fyc-ink);
    --bs-alert-bg: var(--fyc-surface);
    --bs-alert-border-color: var(--fyc-line);
}

.notice-warn {
    --bs-alert-color: var(--fyc-warn);
    --bs-alert-bg: var(--fyc-warn-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--fyc-warn) 30%, transparent);
}

.notice-ok {
    --bs-alert-color: var(--fyc-ok);
    --bs-alert-bg: var(--fyc-ok-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--fyc-ok) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   Tarjetas: .card de Bootstrap con los tokens de la marca
   ------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--fyc-surface);
    --bs-card-border-color: var(--fyc-line);
    --bs-card-border-radius: var(--fyc-radius);
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
    --bs-card-cap-bg: var(--fyc-page);
    min-width: 0;
}

.card-body {
    display: grid;
    gap: 0.75rem;
}

.sub {
    color: var(--fyc-muted);
    font-size: 0.84375rem;
}

/* Dos columnas que se apilan en el móvil (pedido individual, alta). */
.two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ---------------------------------------------------------------------------
   Pedido de empresa: tabla y cantidades
   ------------------------------------------------------------------------- */

/* La tabla se desplaza dentro de su caja: la página nunca se ensancha. */
.order-wrap {
    overflow-x: auto;
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    background: var(--fyc-surface);
}

table.order {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: 0.875rem;
}

table.order th,
table.order td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--fyc-line);
    text-align: left;
    vertical-align: middle;
}

table.order thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fyc-muted);
    background: var(--fyc-page);
    position: sticky;
    top: 0;
}

table.order td.qty {
    width: 92px;
}

table.order tr.course-row th {
    background: var(--fyc-page);
    font-size: 0.71875rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fyc-muted);
}

table.order tfoot td {
    font-weight: 700;
    background: var(--fyc-page);
}

.num {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--fyc-line);
    border-radius: 8px;
    background: var(--fyc-surface);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.num:focus {
    border-color: var(--fyc-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fyc-accent) 25%, transparent);
}

/* Tarjeta de un día del pedido individual. */
.ord-day {
    border: 1px solid var(--fyc-line);
    border-radius: var(--fyc-radius);
    background: var(--fyc-surface);
    padding: 0.75rem 0.875rem;
    display: grid;
    gap: 10px;
}

.ord-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ord-day-head b {
    font-size: 0.9375rem;
}

.ord-day .peek {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
}

.opt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Stepper −/número/+. En el móvil los botones suben a 44 px de alto. */
.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fyc-line);
    border-radius: 999px;
    overflow: hidden;
    flex: none;
}

.stepper button {
    border: 0;
    background: var(--fyc-page);
    width: 36px;
    height: 34px;
    font-size: 1.125rem;
    cursor: pointer;
    color: var(--fyc-brick);
}

.stepper output {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.summary {
    display: grid;
    gap: 6px;
    font-size: 0.875rem;
}

.summary .line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.summary .total {
    font-size: 1.125rem;
    font-weight: 800;
    border-top: 1px solid var(--fyc-line);
    padding-top: 8px;
}

/* ---------------------------------------------------------------------------
   Estado grande y zona de personal
   ------------------------------------------------------------------------- */

/* La tarjeta del acceso («Entrar»), centrada al ancho del prototipo. */
.acceso-card {
    max-width: 440px;
    width: 100%;
    margin-inline: auto;
}

/* El «Entrar» en serif, como el prototipo. */
.titulo-acceso {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: 1.875rem;
    color: var(--fyc-maroon);
}

/* Las pestañas de la zona de personal, como en el prototipo. */
.staff-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.staff-nav .btn[aria-current="page"] {
    --bs-btn-bg: var(--fyc-tomato);
    --bs-btn-border-color: var(--fyc-tomato);
    --bs-btn-color: #fff;
}

/* Los botones de una fila del listado, juntos a la derecha y sin que un
   formulario en línea los parta. */
.list-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.list-actions form {
    display: inline-flex;
    margin-bottom: 0;
}

/* Los formularios en línea de las listas (crear cuenta, buscar). */
.cuenta-crear {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.cuenta-crear .form-control {
    width: auto;
}

.big-state {
    text-align: center;
    padding: 1.625rem 1rem;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.big-state h2 {
    font-family: var(--fyc-font-display);
    font-weight: 400;
    font-size: 1.875rem;
    color: var(--fyc-maroon);
}

.check {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--fyc-ok-soft);
    color: var(--fyc-ok);
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    font-weight: 800;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78125rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.status.ok {
    background: var(--fyc-ok-soft);
    color: var(--fyc-ok);
}

.status.warn {
    background: var(--fyc-warn-soft);
    color: var(--fyc-warn);
}

.status.off {
    background: var(--fyc-page);
    color: var(--fyc-muted);
    border: 1px solid var(--fyc-line);
}

.list {
    display: grid;
}

.list .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--fyc-line);
    flex-wrap: wrap;
}

.list .row:last-child {
    border-bottom: 0;
}

.list .who {
    min-width: 0;
}

.list .who b {
    display: block;
    font-size: 0.90625rem;
}

.list .who span {
    font-size: 0.8125rem;
    color: var(--fyc-muted);
    overflow-wrap: anywhere;
}

.copybox {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--fyc-page);
    border: 1px dashed var(--fyc-line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.copybox code {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.78125rem;
    color: var(--fyc-ink);
}

/* ---------------------------------------------------------------------------
   Móvil
   ------------------------------------------------------------------------- */

@media (max-width: 699.98px) {
    /* Una pestaña por día, columnas de un día. */
    .day-tabs {
        display: flex;
    }

    .days {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    /* Con JS, una columna y sólo el día elegido: el resto lo esconde el
       propio JS poniendo la clase; sin JS las columnas están todas. */
    .days.day-tabs-on .day {
        display: none;
    }

    .days.day-tabs-on .day.is-active {
        display: flex;
    }

    .app-main {
        padding: 0.875rem;
    }

    .app-head-inner {
        padding: 0.875rem;
    }

    /* Objetivos táctiles de 44 px como mínimo en lo interactivo. */
    .chip,
    .day-tab,
    .pill-link {
        min-height: 44px;
    }

    .stepper button {
        width: 44px;
        height: 44px;
    }

    .stepper output {
        min-width: 40px;
    }
}

@media (min-width: 700px) {
    .app-main,
    .app-head-inner,
    .app-foot-inner {
        padding-inline: 1.125rem;
    }
}

/* ---------------------------------------------------------------------------
   Página de componentes (/componentes, sólo en desarrollo)
   ------------------------------------------------------------------------- */

/* Catálogo de iconos: cada celda pinta el icono con currentColor. */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.icon-cell {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--fyc-muted);
    padding: 8px 4px;
    border: 1px dashed var(--fyc-line);
    border-radius: 8px;
}

.icon-cell.hit {
    color: var(--fyc-danger);
    border-color: var(--fyc-danger);
}

.al-icon-24 {
    width: 24px;
    height: 24px;
}

.al-icon-32 {
    width: 32px;
    height: 32px;
}

/* Vista previa a ancho de móvil dentro de la página: enseña las pestañas de
   día y los días en una columna sin estrechar la ventana. */
.demo-mobile {
    max-width: 400px;
}

.demo-mobile .day-tabs {
    display: flex;
}

.demo-mobile .days {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
}

.demo-half {
    max-width: 20rem;
}

/* El movimiento es opt-in: con la preferencia de menos movimiento, nada. */
@media (prefers-reduced-motion: no-preference) {
    .dish,
    .chip,
    .btn,
    .day-tab {
        transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }
}