/* ===== 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. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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 ===== */
.pv-btn {
    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 {
        padding: 0 15px 0 18px;
        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: 20px;
}

.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; }