/* =========================================================
   Variables CSS
   ========================================================= */
:root {
    /* Colores corporativos */
    --color-corporativo: #d85d07; /* #d85d07;*/
    /*Variable Cabeceras*/
    --color-fondo-cabeceras: #FFEDE2; /*#d55d09a6;*/
    --color-texto-cabeceras: #FFFFFF;
    /*Variable portlet*/
    --color-texto-portlet: #D85D07;
    --color-fondo-portlet: #FFFFFF;
    /*Variable accordion*/
    --color-fondo-activo-accordion: #FFC9A6;
    --color-fondo-no-activo-accordion: #FFEDE2;
    --color-texto-activo-accordion: #ffffff;
    --color-texto-no-activo-accordion: #d85d07;
    --color-borde-accordion: rgba(216, 93, 7, .25);
    /* Layout */
    --sidenav-width: 250px; /* SB Admin default */
    --topnav-height: 56px; /* alto del MenuSuperior */
    --ficha-height: 64px;
}

/* =========================================================
   Sobrescribir el estado hover de btn
   ========================================================= */
.btn-success:hover {
    background: color-mix(in srgb, #198754 80%, white) !important;
    border-color: var(--bs-success) !important;
    transition: all 0.15s ease-in-out; /* Suaviza el efecto */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #198754 20%, transparent);
}

/* Efecto cuando se hace clic (active) */
.btn-success:active {
    filter: brightness(0.9) !important; /* Se oscurece un poco al pulsar */
}

.btn-primary:hover {
    background: color-mix(in srgb, #1b6ec2 80%, white) !important;
    border-color: var(--bs-primary) !important;
    transition: all 0.15s ease-in-out; /* Suaviza el efecto */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #1b6ec2 20%, transparent);
}

/* Efecto cuando se hace clic (active) */
.btn-primary:active {
    filter: brightness(0.9) !important; /* Se oscurece un poco al pulsar */
}

.btn-secondary:hover {
    background: color-mix(in srgb, #6c757d 80%, white) !important;
    border-color: var(--bs-primary) !important;
    transition: all 0.15s ease-in-out; /* Suaviza el efecto */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #6c757d 20%, transparent);
}

/* Efecto cuando se hace clic (active) */
.btn-secondary:active {
    filter: brightness(0.9) !important; /* Se oscurece un poco al pulsar */
}

.btn-danger:hover {
    background: color-mix(in srgb, #dc3545 80%, white) !important;
    border-color: var(--bs-danger) !important;
    transition: all 0.15s ease-in-out; /* Suaviza el efecto */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #dc3545 20%, transparent);
}

/* Efecto cuando se hace clic (active) */
.btn-danger:active {
    filter: brightness(0.9) !important; /* Se oscurece un poco al pulsar */
}

.btn-warning:hover {
    background: color-mix(in srgb, #ffc107 80%, white) !important;
    border-color: var(--bs-warning) !important;
    transition: all 0.15s ease-in-out; /* Suaviza el efecto */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, #ffc107 20%, transparent);
}

/* Efecto cuando se hace clic (active) */
.btn-warning:active {
    filter: brightness(0.9) !important; /* Se oscurece un poco al pulsar */
}

/* =========================================================
   Media queries para altura de ficha (sb-topnav-ficha)
   ========================================================= */
/* >=992px (desktop) */
/* Entre 768px y 991.98px (tablet / md -> sm): normalmente aumenta por wraps */
@media (max-width: 991.98px) {
    :root {
        --ficha-height: 128px;
    }

    /* Ficha a ancho completo en tablet/móvil */
    .sb-topnav-ficha {
        left: 0 !important;
        z-index: 1036 !important; /* nav lateral suele ser 1038, topnav 1039 */
    }

    /* Asegurar que el lateral está por encima */
    #layoutSidenav_nav {
        z-index: 1038 !important;
    }
}

/* <=575.98px (móvil xs): valor medido por usted en la captura */
@media (max-width: 575.98px) {
    :root {
        --ficha-height: 163px;
    }
}

/* =========================================================
   Estilos base
   ========================================================= */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* =========================================================
   Validación de formularios
   ========================================================= */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

/* =========================================================
   Blazor error boundary
   ========================================================= */
.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."
    }

/* =========================================================
   Utilidades
   ========================================================= */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* =========================================================
   Estilos corporativos
   ========================================================= */
.navbar-brand-corporativo {
    background-color: var(--color-corporativo) !important;
    /*    color: var(--color-texto-cabeceras) !important;*/
}

.titulo-corporativo {
    background-color: var(--color-corporativo);
    color: var(--color-texto-cabeceras);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

.colores-corporativo {
    color: var(--color-corporativo) !important;
}


.bg-color-corporativo {
    background-color: var(--color-corporativo) !important;
}

/* =========================================================
   Accordion
   ========================================================= */
.accordion {
    --bs-accordion-bg: #ffffff; /* fondo (suave) blanco */
    --bs-accordion-border-color: var(--color-borde-accordion);
    --bs-accordion-border-radius: 12px;
    --bs-accordion-btn-bg: var(--color-fondo-no-activo-accordion); /* cabecera acordation cuando no esta activa naranga muy suave  #FFEDE2;*/
    /*--bs-accordion-btn-color: #3a1f0a;*/ /* texto */
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.9rem;
    --bs-accordion-active-bg: var(--color-fondo-activo-accordion); /*rgba(216,93,7,.12); Color cabecera acordation cuando esta activo naranga suave*/
    --bs-accordion-active-color: #ffffff; /* color activo */
    --bs-accordion-btn-focus-border-color: rgba(216, 93, 7, .45);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(216, 93, 7, .20);
    /* Texto cuando NO está expandido (collapsed) por defecto */
    --bs-accordion-btn-color: #1b6ec2; /* elige tu tono #6b3a16 */
    /* Flecha CERRADO (naranja) */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M1.5 5.5l6.5 6.5 6.5-6.5' fill='none' stroke='%23d85d07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    /* Flecha ABIERTO (blanco) */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M1.5 5.5l6.5 6.5 6.5-6.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

    /* Detalles visuales extra (opcionales) */
    .accordion-item {
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: .75rem;
    }

/* (Opcional) Texto cuando SÍ está expandido */
.accordion-button:not(.collapsed) {
    color: var(--color-texto-activo-accordion) !important;
    /*-webkit-text-stroke: 0.9px #d55d09a6;*/ /* grosor y color del borde del texto*/
    font-weight: 600;
}

/* Texto del botón cuando NO está expandido */
.accordion-button.collapsed {
    color: var(--color-corporativo) !important;
}

/* =========================================================
   Barra fija de ficha (TopBar)
   ========================================================= */
.sb-topnav-ficha {
    position: fixed;
    top: var(--topnav-height);
    left: var(--sidenav-width);
    right: 0;
    height: var(--ficha-height);
    z-index: 1039;
    background: var(--bs-body-bg);
    background: var(--color-fondo-cabeceras) !important;
    border-bottom: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
   /*border-bottom: 1px solid rgba(0,0,0,.125);*/
}
    .sb-topnav-ficha::before {
        content: "";
        display: block;
        height: 3px;
        background: var(--color-corporativo);
    }

/* Toggle manual (botn hamburguesa): el body s recibe la clase */
body.sb-sidenav-toggled .sb-topnav-ficha {
    left: 0 !important;
}

/* Contenido: solo reservamos hueco cuando hay ficha visible */
.layout-content.has-ficha {
    padding-top: var(--ficha-height) !important;
}


/* =========================
   Propuesta A: Header premium 2 filas
   ========================= */

.ficha-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 1rem;
}

.ficha-row-1 {
    padding-top: .5rem;
}

.ficha-title .ficha-icon {
    color: var(--color-corporativo);    
    font-size: 1.5rem;
}

.ficha-h1 {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--color-corporativo);
    /*#212529;*/
    letter-spacing: .2px;
}

.ficha-subtitle {
    font-size: .9rem;
    color: rgba(33,37,41,.7);
    line-height: 1.3rem;
}

.ficha-badge {
    font-weight: 600;
    color: rgba(33,37,41,.75);
}

.ficha-estado {
    font-weight: 700;
    padding: .35rem .65rem;
}

    /* Estados (ajuste colores a su criterio) */
    .ficha-estado.estado-borrador {
        background: #e7f1ff;
        color: #0b5ed7;
        border: 1px solid rgba(13,110,253,.25);
    }

    .ficha-estado.estado-firmado {
        background: #fff3cd;
        color: #856404;
        border: 1px solid rgba(255,193,7,.35);
    }

    .ficha-estado.estado-vigente {
        background: #d1e7dd;
        color: #0f5132;
        border: 1px solid rgba(25,135,84,.30);
    }

/* Responsive: en móvil apilamos acciones abajo */
@media (max-width: 575.98px) {
    .ficha-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ficha-actions .btn-toolbar {
        justify-content: stretch !important;
    }

    .ficha-actions .btn-group {
        width: 100%;
    }

        .ficha-actions .btn-group .btn {
            flex: 1 1 auto;
        }
}


/* =========================
   Estilos para el libro mantenimiento planificacion
   ========================= */
.check-mes {
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

.check-mes-cabecera {
    width: 1.3rem;
    height: 1.3rem;
    cursor: pointer;
    accent-color: var(--bs-white);
}

/* Fila seleccionada — funciona en ambas tablas Bootstrap */
.fila-planning-activa > td {
    background-color: palegreen !important; /* ? Verde fresco y visible */
    /*background-color: rgba(40, 167, 69, 0.2) !important;*/ /* ? Verde success al 20% */
    font-weight: 600;
}

    .fila-planning-activa > td:first-child {
        border-left: 4px solid #28a745 !important;
    }

.fila-planning-activa:hover > td {
    background-color: #7CF77C !important; /* ? Más intenso al pasar ratón */
}

/* =========================
   Estilos para Recurso reservas calendario disponibilidad
   ========================= */
.calendario-disp td, .calendario-disp th {
    vertical-align: middle;
}

.celda-badge {
    min-height: 26px;
    white-space: nowrap;
}

.celda-disponible:hover {
    background-color: rgba(25,135,84,.10) !important;
    transition: background-color .15s ease;
}

.celda-seleccion-inicio {
    background-color: rgba(255,193,7,.35) !important;
    outline: 2px solid #ffc107;
    outline-offset: -2px;
}

.celda-seleccion-rango {
    background-color: rgba(255,193,7,.15) !important;
}

.celda-pendiente-otro {
    background: repeating-linear-gradient(45deg, rgba(253,126,20,.22), rgba(253,126,20,.22) 4px, transparent 4px, transparent 10px) !important;
    outline: 1px solid rgba(253,126,20,.55);
    outline-offset: -1px;
}

.celda-pendiente-mia {
    background: repeating-linear-gradient(45deg, rgba(13,110,253,.22), rgba(13,110,253,.22) 4px, transparent 4px, transparent 10px) !important;
    outline: 1px solid rgba(13,110,253,.45);
    outline-offset: -1px;
}

.celda-transito-otro {
    background: repeating-linear-gradient(90deg, rgba(255,159,64,.30) 0 3px, transparent 3px 6px) !important;
    outline: 2px dashed #ff9f40;
    outline-offset: -2px;
}

.celda-transito-mia {
    background: repeating-linear-gradient(90deg, rgba(13,110,253,.30) 0 3px, transparent 3px 6px) !important;
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
}

.celda-aprobado-movil {
    background-color: rgba(32,201,151,.18) !important;
    outline: 2px solid rgba(32,201,151,.75);
    outline-offset: -2px;
}

.leyenda-pendiente-otro {
    background: repeating-linear-gradient(45deg, rgba(253,126,20,.6) 0 4px, #fff3e0 4px 10px);
    color: #6c3a00;
    padding: .15em .45em;
    font-size: .85em;
    display: inline-block;
}

.leyenda-pendiente-mia {
    background: repeating-linear-gradient(45deg, rgba(13,110,253,.55) 0 4px, #e7f0ff 4px 10px);
    color: #003380;
    padding: .15em .45em;
    font-size: .85em;
    display: inline-block;
}

.leyenda-transito-otro {
    background: repeating-linear-gradient(90deg, rgba(255,159,64,.6) 0 3px, #ffe0b2 3px 6px);
    color: #e65100;
    padding: .15em .45em;
    font-size: .85em;
    display: inline-block;
}

.leyenda-transito-mia {
    background: repeating-linear-gradient(90deg, rgba(13,110,253,.55) 0 3px, #e7f0ff 3px 6px);
    color: #003380;
    padding: .15em .45em;
    font-size: .85em;
    display: inline-block;
}