/* Tema institucional GADICC Cañar.
   Cambia únicamente la paleta visual; no modifica estructura ni dimensiones. */
:root {
    --institutional-primary: #0095c8;
    --institutional-primary-dark: #007ba6;
    --institutional-primary-deep: #006b91;
    --institutional-sidebar: #087f9f;
    --institutional-sidebar-dark: #066b88;
    --institutional-primary-soft: #e7f7fc;
    --institutional-primary-border: #b9e3ef;
    --app-primary: var(--institutional-primary);
    --app-primary-dark: var(--institutional-primary-dark);
    --app-sidebar-bg: var(--institutional-sidebar);
    --app-sidebar-border: rgba(255, 255, 255, .28);
}

/* Navegación principal */
.app-sidebar {
    background: linear-gradient(180deg, var(--institutional-sidebar) 0%, #087895 100%);
    border-right-color: var(--institutional-primary-border);
}

.app-sidebar__brand-row,
.app-sidebar__brand {
    background: var(--institutional-sidebar-dark);
}

.app-sidebar__brand:hover,
.app-sidebar__brand:focus,
.app-sidebar__toggle-host .app-topbar__toggle:hover,
.app-sidebar__toggle-host .app-topbar__toggle:focus {
    background: var(--institutional-primary-deep);
}

.app-sidebar__section-title,
.app-sidebar__brand-subtitle,
.app-sidebar__footer,
.app-sidebar__access-lock {
    color: #e7f8fd;
}

.app-sidebar__link,
.app-sidebar__group-toggle,
.app-sidebar__submenu-link {
    color: #f2fbfe;
}

.app-sidebar__group.is-open {
    border-left-color: #c9f3ff;
}

.app-sidebar__group.is-open > .app-sidebar__group-toggle {
    border: 1px solid rgba(200, 241, 251, .88);
    background: #bfeaf5;
    color: var(--institutional-primary-deep);
    box-shadow: inset 4px 0 0 var(--institutional-primary), 0 4px 10px rgba(0, 54, 73, .16);
    font-weight: 700;
}

.app-sidebar__group.is-open > .app-sidebar__group-toggle .app-sidebar__icon {
    color: var(--institutional-primary);
}

.app-sidebar__group.is-open > .app-sidebar__group-toggle .app-sidebar__chevron {
    color: var(--institutional-primary-dark);
}

/* Ubicación actual: menú principal, grupo y opción exacta. */
.app-sidebar__nav > .app-sidebar__link.is-active {
    background: rgba(244, 252, 255, .96);
    color: var(--institutional-primary-deep);
    box-shadow: inset 4px 0 0 #d8f7ff, 0 5px 12px rgba(0, 54, 73, .18);
    font-weight: 750;
}

.app-sidebar__nav > .app-sidebar__link.is-active .app-sidebar__icon {
    color: var(--institutional-primary);
}

.app-sidebar__group.is-active {
    padding: 4px 4px 7px 5px;
    background: rgba(0, 57, 78, .2);
    border-left-color: #d8f7ff;
}

.app-sidebar__group.is-active > .app-sidebar__group-toggle {
    border: 1px solid rgba(216, 247, 255, .92);
    background: #d8f7ff;
    color: var(--institutional-primary-deep);
    box-shadow: inset 4px 0 0 var(--institutional-primary), 0 5px 12px rgba(0, 54, 73, .2);
    font-weight: 750;
}

.app-sidebar__group.is-active > .app-sidebar__group-toggle .app-sidebar__icon {
    color: var(--institutional-primary);
}

.app-sidebar__group.is-active > .app-sidebar__group-toggle .app-sidebar__chevron {
    color: var(--institutional-primary-dark);
}

.app-sidebar__group.is-active > .app-sidebar__submenu {
    border-left-color: rgba(216, 247, 255, .78);
}

.app-sidebar__submenu-link.is-active {
    position: relative;
    padding-right: 36px;
    background: #f2fbfe;
    color: var(--institutional-primary-deep);
    box-shadow: 0 4px 10px rgba(0, 52, 70, .18);
    font-weight: 750;
}

.app-sidebar__submenu-link.is-active:hover,
.app-sidebar__submenu-link.is-active:focus {
    background: #fff;
    color: var(--institutional-primary-deep);
}

.app-sidebar__submenu-link.is-active::before {
    background: var(--institutional-primary);
    box-shadow: 0 0 0 3px rgba(216, 247, 255, .9);
}

.app-sidebar__submenu-link.is-active::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--institutional-primary);
    color: #fff;
    content: "\2713";
    font-size: .68rem;
    font-weight: 800;
    transform: translateY(-50%);
}

body.app-sidebar-collapsed .app-sidebar__group.is-active > .app-sidebar__group-toggle {
    background: rgba(244, 252, 255, .96);
    color: var(--institutional-primary-deep);
    box-shadow: inset 4px 0 0 #d8f7ff, 0 5px 12px rgba(0, 54, 73, .18);
}

body.app-sidebar-collapsed .app-sidebar__group.is-active > .app-sidebar__group-toggle .app-sidebar__icon {
    color: var(--institutional-primary);
}

/* Componentes generales de Bootstrap y formularios */
.btn-info,
.btn-primary,
.badge-info,
.bg-info {
    border-color: var(--institutional-primary) !important;
    background-color: var(--institutional-primary) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-color: var(--institutional-primary-dark) !important;
    background-color: var(--institutional-primary-dark) !important;
}

.text-info {
    color: var(--institutional-primary-dark) !important;
}

.border-info {
    border-color: var(--institutional-primary) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--institutional-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 149, 200, .16) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--institutional-primary);
    background-color: var(--institutional-primary);
}

.page-item.active .page-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    border-color: var(--institutional-primary);
    background-color: var(--institutional-primary);
}

.page-link {
    color: var(--institutional-primary-dark);
}

/* Variables de las páginas públicas renovadas */
.plate-page {
    --plate-primary: var(--institutional-primary);
    --plate-primary-dark: var(--institutional-primary-dark);
    --plate-soft: var(--institutional-primary-soft);
    --plate-border: var(--institutional-primary-border);
}

.rotac-page {
    --rotac-primary: var(--institutional-primary);
    --rotac-primary-dark: var(--institutional-primary-dark);
    --rotac-primary-soft: var(--institutional-primary-soft);
    --rotac-border: var(--institutional-primary-border);
}

.fines-page,
.sri-page,
.crtv-page {
    --service-primary: var(--institutional-primary);
    --service-primary-dark: var(--institutional-primary-dark);
    --service-primary-soft: var(--institutional-primary-soft);
    --service-border: var(--institutional-primary-border);
}

.plate-heading__icon,
.requirements-heading-icon,
.turn-confirm-heading__icon,
.fines-icon,
.sri-icon,
.rotac-action,
.fines-action,
.sri-action,
.crtv-action,
.contact-button-primary,
.contact-map-actions a:first-child,
.registration-value-page .btn-info,
.booking-panel #myAceptar {
    border-color: var(--institutional-primary) !important;
    background: var(--institutional-primary) !important;
    color: #fff !important;
}

.plate-heading,
.rotac-heading,
.fines-heading,
.sri-heading,
.crtv-heading,
.road-heading,
.registration-value-heading,
.requirements-heading,
.turn-confirm-heading {
    border-left-color: var(--institutional-primary) !important;
}

.plate-panel,
.rotac-query {
    border-top-color: var(--institutional-primary) !important;
}

.plate-actions .btn-info,
.rotac-fields .btn-info {
    border-color: var(--institutional-primary) !important;
    background: var(--institutional-primary) !important;
}

.plate-actions .btn-info:hover,
.plate-actions .btn-info:focus,
.rotac-fields .btn-info:hover,
.rotac-fields .btn-info:focus,
.rotac-card:hover .rotac-action,
.rotac-card:focus .rotac-action {
    border-color: var(--institutional-primary-dark) !important;
    background: var(--institutional-primary-dark) !important;
}

.vehicle-type-option.is-selected,
.registration-type-option.is-selected {
    border-color: var(--institutional-primary) !important;
    background: var(--institutional-primary-soft) !important;
}

.personal-data-card .card-header,
.vehicle-registration .card-header,
.requirements-page .requirement-category[open] > summary,
.requirement-service[open] > summary::before {
    background: var(--institutional-primary) !important;
    color: #fff !important;
}

.road-total,
.registration-grand-total {
    border-color: var(--institutional-primary) !important;
}

.fc-button-primary,
.fc .fc-button-primary {
    border-color: var(--institutional-primary) !important;
    background-color: var(--institutional-primary) !important;
}

.fc-button-primary:hover,
.fc-button-primary:focus,
.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
    border-color: var(--institutional-primary-dark) !important;
    background-color: var(--institutional-primary-dark) !important;
}

/* Portada */
.home-landing {
    background-color: var(--institutional-primary);
}

.home-landing__overlay {
    background:
        radial-gradient(circle at 78% 22%, rgba(71, 196, 232, .32), transparent 38%),
        linear-gradient(110deg, var(--institutional-primary-deep) 0%, var(--institutional-primary) 55%, #16a7d2 100%);
}

.home-landing__action--primary {
    position: relative;
    overflow: hidden;
    border-color: #ffc45f;
    background: linear-gradient(135deg, #ffb13a 0%, #ffa01f 58%, #f08a00 100%);
    color: #171519;
    box-shadow: 0 9px 24px rgba(143, 81, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .38);
    text-shadow: none;
}

.home-landing__action--primary:hover,
.home-landing__action--primary:focus {
    border-color: #ffe0a6;
    background: linear-gradient(135deg, #ffbd4f 0%, #ffa01f 52%, #e98200 100%);
    color: #171519;
    box-shadow: 0 12px 30px rgba(128, 70, 0, .4), 0 0 0 4px rgba(255, 193, 83, .22);
}

.home-landing__action--primary > i:first-child {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(23, 21, 25, .24);
    border-radius: 50%;
    background: rgba(23, 21, 25, .1);
    color: #171519;
}

.home-landing__action--primary .home-landing__action-lock {
    color: #171519;
}

.home-landing__action--secondary {
    border-color: rgba(255, 255, 255, .82);
    background: rgba(242, 251, 254, .96);
    color: var(--institutional-primary-deep);
}

.home-landing__action--secondary:hover,
.home-landing__action--secondary:focus {
    border-color: #fff;
    background: #fff;
    color: #005f80;
}

.home-calendar-card__schedule,
.home-service-strip {
    background: linear-gradient(110deg, var(--institutional-sidebar-dark), var(--institutional-sidebar));
}

.home-notice__icon {
    color: var(--institutional-primary);
}

.home-notice__confirm {
    background: var(--institutional-primary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 149, 200, .24);
}

.home-notice__confirm:hover,
.home-notice__confirm:focus {
    background: var(--institutional-primary-dark);
    color: #fff;
}

.home-landing a:focus-visible,
.home-landing button:focus-visible,
.home-service-strip a:focus-visible,
.home-notice button:focus-visible {
    outline-color: #d8f7ff;
}

/* Pantallas independientes de mantenimiento y conectividad */
.maintenance-card,
.connection-card {
    border-top-color: var(--institutional-primary) !important;
}

.maintenance-icon,
.connection-icon,
.retry-link,
.enviar {
    border-color: var(--institutional-primary) !important;
    background: var(--institutional-primary) !important;
    color: #fff !important;
}

.retry-link:hover,
.retry-link:focus,
.enviar:hover,
.enviar:focus {
    border-color: var(--institutional-primary-dark) !important;
    background: var(--institutional-primary-dark) !important;
    color: #fff !important;
}

.status-pill {
    border-color: var(--institutional-primary-border) !important;
    background: var(--institutional-primary-soft) !important;
    color: var(--institutional-primary-dark) !important;
}

/* Accesibilidad: foco visible con el mismo color institucional. */
.app-content-container a:focus-visible,
.app-content-container button:focus-visible,
.app-content-container input:focus-visible,
.app-content-container select:focus-visible,
.app-content-container textarea:focus-visible {
    outline-color: var(--institutional-primary);
}