:root {
    --edca-navy: #142239;
    --edca-navy-dark: #0a1420;
    --edca-accent: #142239;
    --edca-gray: #969696;
    --edca-bg: #f4f6f9;
    --edca-border: #d9dbe0;
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background-color: var(--edca-bg);
}

a, .btn-link {
    color: var(--edca-navy);
}

.text-muted {
    color: var(--edca-gray) !important;
}

.btn-primary, .btn-edca-primary {
    color: #fff;
    background-color: var(--edca-accent);
    border-color: var(--edca-accent);
}

    .btn-primary:hover, .btn-primary:focus, .btn-edca-primary:hover, .btn-edca-primary:focus {
        background-color: var(--edca-navy-dark);
        border-color: var(--edca-navy-dark);
        color: #fff;
    }

.btn-edca-outline {
    color: var(--edca-navy);
    border-color: var(--edca-navy);
    background-color: #fff;
}

    .btn-edca-outline:hover, .btn-edca-outline:focus {
        color: #fff;
        background-color: var(--edca-navy);
        border-color: var(--edca-navy);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--edca-navy);
}

.form-check-input:checked {
    background-color: var(--edca-navy);
    border-color: var(--edca-navy);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message, .edca-validation {
    color: #dc3545;
    font-size: 0.78rem;
    margin-top: -0.15rem;
}

.form-control.invalid, .form-select.invalid {
    border-color: #dc3545;
}

    .form-control.invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
    }

/* === context_style: componentes === */

.edca-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--edca-gray);
    margin-bottom: 0.3rem;
}

th.edca-field-label,
td.edca-field-label {
    display: table-cell;
    margin-bottom: 0;
}

.edca-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--edca-navy);
}

.edca-card {
    background: #fff;
    border: 1px solid var(--edca-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.edca-card-narrow {
    width: 100%;
    max-width: 420px;
}

.edca-card-wide {
    max-width: 480px;
}

/* A partir de tablet, un tope fijo por breakpoint (por ejemplo 560px) deja mucho hueco muerto en
   una tablet en horizontal (viewport ~1024-1180px): con min(90vw, tope) la tarjeta escala con el
   ancho real disponible en vez de saltar solo en los anchos exactos de los breakpoints. El
   contenido sigue siendo una sola columna (formulario/firma/QR), así que el tope superior evita que
   se estire de más en pantallas grandes — FirmaPad ya capa su propio ancho en 600px. */
@media (min-width: 768px) {
    .edca-card-wide {
        max-width: min(90vw, 720px);
    }
}

@media (min-width: 1200px) {
    .edca-card-wide {
        max-width: 800px;
    }
}

.edca-card--highlight {
    background: #f5f8ff;
}

/* Modal de confirmación de PanelAcciones (Portal del conductor): como clase y no "style" en línea,
   que una CSP sin 'unsafe-inline' no admite (AC3.2). */
.edca-modal-overlay {
    z-index: 1050;
}

.edca-modal-card {
    max-width: 22rem;
}

/* Anchos fijos de los campos numéricos compactos de la tabla de mercancía editable (tarea #97): como
   clase y no como "style" en línea, que una CSP sin 'unsafe-inline' no admite. */
.edca-input-xs {
    width: 4.5rem;
}

.edca-input-sm {
    width: 5.5rem;
}

.edca-input-md {
    width: 6rem;
}

/* Zona de firma del portal del conductor (tarea #82). touch-action: none es funcional, no estético:
   sin ella, arrastrar el dedo sobre el lienzo desplaza la página y no dibuja. */
.edca-lienzo-firma {
    border: 1px dashed #b6bdc6;
    border-radius: 0.5rem;
    background-color: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* Marco vacío de "Tu firma" en la vista de documento/QR: se muestra solo si el documento todavía no
   está firmado, o si el PNG capturado ya no se puede recuperar (ver .edca-firma-imagen). */
.edca-firma-marco {
    min-height: 90px;
    border: 1.5px dashed var(--edca-gray);
    border-radius: 0.5rem;
    background: #fff;
}

/* La firma ya capturada, servida por /api/v1/conductor/{token}/firma, en la misma vista. */
.edca-firma-imagen {
    max-width: 100%;
    max-height: 140px;
    border: 1px solid var(--edca-border);
    border-radius: 0.5rem;
    background: #fff;
}

/* Imagen del QR de verificación en la misma vista: ancho fijo para que no ocupe toda la tarjeta en
   pantallas grandes, como clase y no como "style" en línea (ver .edca-input-xs/sm/md). */
.edca-qr-imagen {
    max-width: 220px;
    width: 100%;
}

.edca-heading {
    color: var(--edca-navy);
    font-weight: 700;
}

.edca-stat-card {
    background: #fff;
    border: 1px solid var(--edca-border);
    border-radius: 0.75rem;
    padding: 0.85rem;
}

.edca-stat-card-link {
    cursor: pointer;
    color: inherit;
    transition: all 0.15s ease-in-out;
}

    .edca-stat-card-link:hover {
        border-color: var(--edca-navy);
        box-shadow: 0 4px 12px rgba(20, 34, 57, 0.15);
    }

.edca-stat-card-danger {
    border-color: #a4231c;
    background-color: #fbdcdc;
}

.edca-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--edca-navy);
}

@media (max-width: 575.98px) {
    .edca-stat-value {
        font-size: 1.25rem;
    }
}

.edca-tile {
    background: #fff;
    border: 1px solid var(--edca-border);
    border-radius: 0.9rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Líneas de mercancía (DetalleTransporte.razor, tarea #102): una sola columna siempre — la sección
   Mercancía ya comparte el ancho de la tarjeta con Trayecto en .edca-detalle-grid, así que partirla
   otra vez en columnas aquí dentro la dejaría demasiado estrecha. gap sustituye al margin-bottom
   individual de .edca-tile, que aquí duplicaría el espaciado vertical sin aportar nada. */
.edca-lineas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.edca-lineas-grid .edca-tile {
    margin-bottom: 0;
}

/* Ruta+Vehículo y Mercancía+Trayecto lado a lado desde tablet (DetalleTransporte.razor, tarea #102):
   secciones completas en paralelo en vez de recortar columnas dentro de cada una. */
@media (min-width: 768px) {
    .edca-lineas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

@media (min-width: 768px) {
    .edca-accciones-secundarias {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Miniatura cuadrada de una fotografía de incidencia (RegistrarIncidencia.razor): la CSP no admite
   'unsafe-inline', así que aspect-ratio/object-fit no pueden ir como style en línea (AC3.2). */
.edca-foto-miniatura {
    aspect-ratio: 1;
    object-fit: cover;
}

/* Envoltorio del conductor (ConductorLayout): mismo aspecto de tarjeta única centrada que ya usa
   el portal anónimo por enlace (edca-card-wide dentro de PublicLayout), para que el listado de
   los últimos 7 días y el panel de un transporte concreto se vean como la misma app "de bolsillo",
   sin la barra de navegación del panel de administración. */
.edca-mobile-backdrop {
    min-height: 100vh;
    background: var(--edca-bg);
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.edca-mobile-shell {
    width: 100%;
    max-width: 480px;
    background: #f7f8fa;
    min-height: calc(100vh - 3rem);
    box-shadow: 0 0 0 1px var(--edca-border), 0 12px 32px rgba(16, 24, 40, 0.12);
    border-radius: 1rem;
    overflow: hidden;
}

/* Sin esto, .edca-card-wide de más abajo (firmar/QR/incidencia bajo sesión de conductor, a
   diferencia del enlace público anónimo que cuelga de PublicLayout sin este tope) nunca podría
   crecer: quedaría recortada por esta cáscara antes de llegar a su propio max-width. La variante
   --listado de más abajo la sustituye con un tope mayor para el listado en grid. */
@media (min-width: 768px) {
    .edca-mobile-shell {
        max-width: min(90vw, 720px);
    }
}

@media (min-width: 1200px) {
    .edca-mobile-shell {
        max-width: 800px;
    }
}

.edca-mobile-header {
    background: #fff;
    border-bottom: 1px solid var(--edca-border);
    padding: 0.9rem 1rem;
}

.edca-mobile-body {
    padding: 1rem;
}

@media (min-width: 768px) {
    .edca-mobile-body {
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .edca-mobile-shell {
        border-radius: 0;
    }

    .edca-mobile-backdrop {
        padding: 0;
    }
}

/* Listado de transportes (tarea #102): en tablet/escritorio hay hueco de sobra para mostrar varias
   tarjetas por fila, así que esta pantalla ensancha la cáscara hasta ese punto — el panel de un
   transporte concreto (firmar, QR, incidencia) tiene su propio ensanchado, más moderado, en
   .edca-card-wide de más abajo, porque su contenido siempre es una sola tarjeta. */
@media (min-width: 768px) {
    .edca-mobile-shell--listado {
        max-width: 720px;
    }
}

@media (min-width: 1200px) {
    .edca-mobile-shell--listado {
        max-width: 1100px;
    }
}

.edca-transportes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .edca-transportes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1200px) {
    .edca-transportes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.edca-badge {
    font-weight: 600;
    padding: 0.4em 0.75em;
}

.edca-badge-success {
    background-color: #d1f5e0;
    color: #0f7a3d;
}

.edca-badge-neutral {
    background-color: #e4e6ea;
    color: #4b5563;
}

.edca-badge-pending {
    background-color: #dbe6f5;
    color: #1f4e8c;
}

.edca-badge-transit {
    background-color: #d6e6ff;
    color: #0b4a9e;
}

.edca-badge-validado {
    background-color: #dcecff;
    color: #0a5aa8;
}

.edca-badge-danger {
    background-color: #fbdcdc;
    color: #a4231c;
}

.edca-badge-purgado {
    background-color: #ececec;
    color: #6b7280;
}

/* Distintivo grande de la empresa del inquilino actual en la cabecera de administración (riesgo
   AC46.3: confundir los datos de una empresa con los de otra). A propósito mucho más vistoso que
   .edca-badge: no es un estado más de un documento, es el contexto de toda la pantalla. */
/* Botón de mostrar/ocultar contraseña (Login.razor): superpuesto dentro del campo, no un botón
   adosado con .input-group — con .input-group el borde y el color del botón (Bootstrap gris) no
   coincidían con el resto de los campos de esta app (borde/acento en var(--edca-navy)/gray). */
.edca-input-con-icono {
    padding-right: 2.75rem;
}

.edca-toggle-password {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    color: var(--edca-gray);
    line-height: 1;
    text-decoration: none;
}

.edca-toggle-password:hover, .edca-toggle-password:focus {
    color: var(--edca-navy);
}

.edca-badge-empresa {
    display: inline-flex;
    align-items: center;
    margin-left: 0.75rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background-color: #fff;
    color: var(--edca-navy);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.edca-profile-option {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .edca-profile-option:hover {
        border-color: var(--edca-navy) !important;
        box-shadow: 0 4px 12px rgba(20, 34, 57, 0.15);
    }

.border-dashed {
    border: 1.5px dashed var(--edca-gray) !important;
}

.edca-route-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.edca-route-line {
    width: 2px;
    background: var(--edca-gray);
    height: 1.5rem;
    margin-left: 0.3rem;
}

/* AC45.14: toda área táctil del portal del conductor mide al menos 44×44px, en retrato y en
   apaisado — el tamaño no depende del contenido del botón/enlace. */
.edca-boton-tactil {
    min-width: 44px;
    min-height: 44px;
}

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