/* ===== ParkVault — Design tokens ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap');


:root {
    --pv-canvas: #F4F5F7;
    --pv-surface: #FFFFFF;
    --pv-ink: #1A1D23;
    --pv-muted: #6B7280;
    --pv-accent: #1E5F74;
    --pv-accent-soft: #E3EEF1;
    --pv-line: #E5E7EB;
    --pv-operativo: #3F8F6B;
    --pv-operativo-soft: #E8F3ED;
    --pv-fuera: #9CA3AF;
    --pv-fuera-soft: #F1F2F4;
    /* Estados de disponibilidad de la agenda */
    --pv-parcial: #B7791F;
    --pv-parcial-soft: #FBF3E2;
    --pv-sincupo: #C2621B;
    --pv-sincupo-soft: #FCEDE2;
    --pv-lleno: #B4453C;
    --pv-lleno-soft: #FAEAE8;
    --pv-radius: 10px;
    --pv-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
    --pv-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

/* Ninguna página debe desplazarse en horizontal: si algo no cabe, que encoja o
   haga scroll dentro de su propio contenedor, no arrastrando la página entera.

   «clip» y no «hidden»: hidden convierte al documento en un contenedor de scroll, y eso
   desactiva position:sticky en todo lo que hay dentro —el menú lateral del panel se iba con
   el listado por esto—. clip corta igual el desbordamiento horizontal sin crear el contenedor.
   Un navegador que no lo entienda se queda con la línea de arriba y vuelve al comportamiento
   anterior: scroll horizontal posible, sticky roto, que es donde estábamos. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--pv-ink);
    background: var(--pv-canvas);
    margin: 0;
}

/* El modelo de caja por defecto hace que padding y borde sumen ancho, que es la
   causa más común de que una rejilla se salga de la pantalla. */
*, *::before, *::after {
    box-sizing: border-box;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fef2f2;
    color: #991b1b;
    border-top: 1px solid #fecaca;
    padding: 12px 20px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}

#blazor-error-ui .reload { color: #991b1b; font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; font-size: 16px; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== ParkVault — Botones y diálogos =====
   Las variantes traen su propia caja además del color: media docena de pantallas las usan
   sueltas, sin la clase base, y ahí salían como botones del navegador —chiquitos y grises—. */
.pv-btn,
.pv-btn-primary,
.pv-btn-ghost,
.pv-btn-warn,
.pv-btn-danger,
.pv-btn-ok {
    padding: 9px 18px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: filter 0.12s, border-color 0.12s;
    font-family: inherit;
}
.pv-btn-primary { background: var(--pv-accent); color: #fff; }
.pv-btn-primary:hover { filter: brightness(1.08); }
.pv-btn-ghost { background: transparent; border-color: var(--pv-line); color: var(--pv-muted); }
.pv-btn-ghost:hover { border-color: var(--pv-accent); color: var(--pv-accent); }
.pv-btn-warn { background: #fff; border-color: #E0A500; color: #B37E00; }
.pv-btn-warn:hover { background: #FDF6E3; }
.pv-btn-danger { background: transparent; color: #C0392B; border-color: transparent; }
.pv-btn-danger:hover { background: #FCEAE8; }
.pv-btn-ok { background: var(--pv-operativo); color: #fff; }
.pv-btn-ok:hover { filter: brightness(1.06); }
.pv-btn-full { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }

.rz-dialog {
    font-family: 'Inter', system-ui, sans-serif;
}


/* Diálogos ParkVault: centrado del overlay sin romper el interior */
.rz-dialog-wrapper {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1050;
}
.rz-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ===== Tablas en pantallas angostas =====
   Queda como red de seguridad para cualquier tabla que no se haya convertido a .pv-lista.
   Dar scroll lateral es lo último que se quiere: esconde justo la primera columna, que es la
   que identifica la fila. Lo bueno es no necesitarlo. */
@media (max-width: 860px) {
    .pv-tabla { display: block; overflow-x: auto; }
}

/* ===== Listados que se reacomodan =====
   Sustituye a las tablas de los listados operativos. En el celular cada fila es una tarjeta
   que se lee de arriba abajo; a partir de 900 px las mismas piezas se alinean en columnas bajo
   una cabecera, como una tabla. Un solo marcado, sin scroll lateral en ningún ancho.

   La página define sus columnas con --pv-cols en el contenedor, y el orden de los elementos
   del marcado es el orden de las columnas: no hacen falta áreas nombradas. */
/* Mide el ancho del contenedor, no el de la ventana: con la barra lateral abierta el
   contenido es unos 250 px más angosto, así que un corte por viewport da columnas apretadas
   justo donde parecía haber sitio. Donde no haya soporte, la consulta se ignora y todo queda
   en tarjetas: se pierde la alineación, nunca la lectura. */
.pv-lista { display: flex; flex-direction: column; gap: 9px; container-type: inline-size; }

.pv-lista-cab { display: none; }

.pv-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 14px;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--pv-surface);
    border: 1px solid var(--pv-line);
    border-left: 3px solid var(--pv-line);
    border-radius: var(--pv-radius, 12px);
    padding: 14px 15px;
}

button.pv-fila { cursor: pointer; transition: box-shadow 0.12s; }
button.pv-fila:hover { box-shadow: var(--pv-shadow, 0 2px 10px rgba(15, 23, 42, 0.07)); }
button.pv-fila:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }

.pv-fila.is-apagada { opacity: 0.62; }

/* La identidad de la fila manda: ocupa la línea entera y el resto envuelve debajo. */
.pv-f-id {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pv-f-titulo { font-weight: 600; font-size: 15px; }
.pv-f-sub {
    font-size: 12.5px;
    color: var(--pv-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-f-dato {
    font-size: 12.5px;
    color: var(--pv-muted);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.pv-f-lbl { margin-right: 5px; }

/* El dato que la pantalla existe para mirar: en el celular se va a la derecha del todo. */
.pv-f-fuerte {
    margin-left: auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--pv-ink, inherit);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pv-f-acciones {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 9px;
    margin-top: 3px;
    border-top: 1px solid var(--pv-line);
}

@container (min-width: 720px) {
    .pv-lista-cab,
    .pv-fila {
        display: grid;
        grid-template-columns: var(--pv-cols);
        align-items: center;
        gap: 14px;
    }

    .pv-lista-cab {
        /* Mismo relleno Y mismos bordes que la fila, aunque invisibles: las pistas «fr» se
           reparten sobre la caja de contenido, y un solo pixel de diferencia entre cabecera y
           fila desalinea todo lo que venga despues de la primera columna flexible. */
        padding: 0 15px;
        border: 1px solid transparent;
        border-left-width: 3px;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--pv-muted);
    }

    /* Las etiquetas las pone la cabecera; repetirlas en cada fila sería ruido. */
    .pv-f-lbl { display: none; }

    .pv-f-fuerte { margin-left: 0; font-size: 15px; }

    .pv-f-acciones {
        padding-top: 0;
        margin-top: 0;
        border-top: none;
        justify-content: flex-end;
    }

    .pv-der { text-align: right; justify-content: flex-end; }
}

/* ===== Cabecera de página (panel administrativo) =====
   Estaba repetida en las nueve páginas del panel. Tres copias se habían quedado sin
   flex-wrap, así que en pantallas angostas el título y el enlace de la derecha se
   apretaban en lugar de bajar de línea. Vive acá para que eso no se pueda repetir;
   cada página conserva solo lo que de verdad le es propio. */
.pv-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pv-title { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.pv-subtitle { font-size: 14px; color: var(--pv-muted); margin: 4px 0 0; max-width: 62ch; }

/* ===== Paneles (tarjetas de contenido) ===== */
.pv-panel { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.pv-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pv-panel-titulo { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.pv-panel-titulo small { font-weight: 500; color: var(--pv-muted); font-size: 13px; }
.pv-panel-sub { font-size: 13px; color: var(--pv-muted); margin: 4px 0 0; }

/* ===== Avisos (feedback inline) ===== */
.pv-aviso { font-size: 13px; padding: 10px 14px; border-radius: 9px; margin: 0 0 16px; background: var(--pv-operativo-soft); color: var(--pv-operativo); border: 1px solid var(--pv-operativo); }
.pv-aviso.is-error { background: var(--pv-lleno-soft); color: var(--pv-lleno); border-color: var(--pv-lleno); }
.pv-aviso-cerrar { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; }

/* ===== Estado de la firma del contrato =====
   Se muestra en el panel operativo, en la agenda y en la lista de reservas, así que vive
   aquí y no dentro del componente: repetido en cada tarjeta, el <style> impedía además que
   el componente pudiera no pintar nada cuando el contrato ya está firmado. */
.ef {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.ef-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ef-firmado { font-size: 11.5px; font-weight: 600; color: #15803D; }
.ef-meta { font-size: 11.5px; color: var(--pv-muted); white-space: nowrap; }
.ef-ok { font-size: 11.5px; font-weight: 600; color: #15803D; }

.ef-error {
    font-size: 11.5px; color: var(--pv-lleno);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ef-btn {
    padding: 3px 9px;
    border: 1px solid var(--pv-line);
    border-radius: 7px;
    background: var(--pv-surface);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pv-accent);
    cursor: pointer;
    white-space: nowrap;
}

.ef-btn:hover:not(:disabled) { border-color: var(--pv-accent); }
.ef-btn:disabled { opacity: 0.55; cursor: default; }

/* ===== Formularios del panel =====
   Estas clases vivían dentro de la página de Configuración, así que los mismos campos se
   veían distintos —o sin estilo— en las demás pantallas: la casilla de «Darle acceso al
   portal» salía encima de su texto porque .pv-check no existía fuera de ahí. */
.pv-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 12px;
}

.pv-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pv-campo > span { font-size: 12px; font-weight: 600; color: var(--pv-muted); }
.pv-campo > span small { font-weight: 500; text-transform: none; }

/* Ocupa el renglón entero: nombres, direcciones y notas no se parten en columnas. */
.pv-campo.pv-ancho { grid-column: 1 / -1; }

/* La casilla va junto a su texto, no encima. */
.pv-campo.pv-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pv-campo.pv-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.pv-campo.pv-check > span { font-size: 13px; color: var(--pv-ink); }

.pv-input {
    padding: 9px 11px;
    border: 1px solid var(--pv-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--pv-surface);
    color: var(--pv-ink);
    width: 100%;
}

.pv-input:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 1px; }

.pv-form-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.pv-ayuda { font-size: 12.5px; color: var(--pv-muted); margin: 12px 0 0; line-height: 1.5; }

/* Lo que va a pasar al guardar, dicho antes de guardar. */
.pv-preview {
    font-size: 13px; color: var(--pv-muted); margin: 14px 0 0;
    padding: 10px 13px; background: var(--pv-canvas); border-radius: 8px; line-height: 1.5;
}