/**
 * THEME-ICONS.CSS
 * Sistema de Iconos SVG con Paleta Personalizada
 * Sin modo nocturno - Solo tema por defecto
 * 
 * Colores principales:
 * - Principal: #2a337c (azul oscuro)
 * - Acento: #e4b138 (dorado)
 * - Fondo blanco para contraste
 */

/* ===================================
   VARIABLES CSS
   =================================== */

:root {
    /* Colores principales del proyecto */
    --color-principal: #2a337c;      /* Azul oscuro - color corporativo */
    --color-acento: #e4b138;         /* Dorado - para destacar */
    --color-blanco: #ffffff;
    
    /* Colores de fondo */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-principal: var(--color-principal);
    
    /* Colores de texto */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-white: #ffffff;
    --text-principal: var(--color-principal);
    
    /* Bordes */
    --border-color: #dee2e6;
    --border-principal: var(--color-principal);
    
    /* Estados */
    --success-bg: #d4edda;
    --success-text: #155724;
    --success-icon: #27ae60;
    
    --error-bg: #f8d7da;
    --error-text: #721c24;
    --error-icon: #e74c3c;
    
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-border: #ffeaa7;
    
    --info-bg: #e8f4f8;
    --info-text: var(--color-principal);
    
    /* Sombras */
    --shadow: rgba(42, 51, 124, 0.15);
    --shadow-hover: rgba(42, 51, 124, 0.25);
}

/* ===================================
   ESTILOS BASE PARA ICONOS SVG
   =================================== */

/* Contenedor de icono SVG */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    transition: filter 0.3s ease;
}

/* Imagen SVG dentro del contenedor */
.icon-svg img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===================================
   TAMAÑOS DE ICONOS
   =================================== */

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 48px;
    height: 48px;
}

.icon-xxl {
    width: 64px;
    height: 64px;
}

/* ===================================
   FILTROS CSS PARA COLOREAR SVG
   =================================== */

/* ICONOS EN COLOR PRINCIPAL (#2a337c) - Por defecto */
.icon-principal,
.icon-svg {
    /* Filtro para #2a337c (azul oscuro) */
    filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(1892%) hue-rotate(214deg) brightness(93%) contrast(95%);
}

/* ICONOS EN COLOR BLANCO - Para fondos oscuros */
.icon-white,
.icon-svg-white {
    /* Filtro para blanco */
    filter: brightness(0) saturate(100%) invert(100%);
}

/* ICONOS EN COLOR ACENTO (#e4b138) - Para destacar */
.icon-acento,
.icon-alert,
.icon-warning {
    /* Filtro para #e4b138 (dorado) */
    filter: brightness(0) saturate(100%) invert(70%) sepia(73%) saturate(531%) hue-rotate(358deg) brightness(97%) contrast(90%);
}

/* ICONOS EN VERDE - Para éxito/confirmación (#27ae60) */
.icon-success,
.icon-check {
    /* Filtro para verde #27ae60 */
    filter: brightness(0) saturate(100%) invert(69%) sepia(28%) saturate(1389%) hue-rotate(88deg) brightness(96%) contrast(84%);
}

/* ICONOS EN ROJO - Para error/peligro (#e74c3c) */
.icon-error,
.icon-danger {
    /* Filtro para rojo #e74c3c */
    filter: brightness(0) saturate(100%) invert(37%) sepia(75%) saturate(1948%) hue-rotate(343deg) brightness(95%) contrast(90%);
}

/* ===================================
   COLORES POR CONTEXTO
   =================================== */

/* Iconos en header/navbar con fondo principal */
.header-ciudadano .icon-svg,
.bg-principal .icon-svg {
    filter: brightness(0) saturate(100%) invert(100%); /* Blanco */
}

/* Iconos de calendario - color principal */
.icon-calendar {
    filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(1892%) hue-rotate(214deg) brightness(93%) contrast(95%);
}

/* Iconos de ticket - color principal */
.icon-ticket {
    filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(1892%) hue-rotate(214deg) brightness(93%) contrast(95%);
}

/* Iconos de documento - color principal */
.icon-document {
    filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(1892%) hue-rotate(214deg) brightness(93%) contrast(95%);
}

/* Iconos de usuario - color principal */
.icon-user {
    filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(1892%) hue-rotate(214deg) brightness(93%) contrast(95%);
}

/* ===================================
   APLICACIÓN DE COLORES GLOBALES
   =================================== */

/* Cards y contenedores */
.card,
.modal-content,
.seccion-requisitos {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

/* Info boxes con color principal */
.info-cita,
.info-cita-resumen,
.detalles-cita-exito {
    background: var(--info-bg);
    border: 2px solid var(--color-principal);
}

/* Aviso ciudadano - usando color acento */
.aviso-ciudadano {
    background: var(--warning-bg);
    border-left: 5px solid var(--color-acento);
}

.aviso-contenido-ciudadano h3 {
    color: var(--color-principal);
}

/* Requisitos */
.requisitos-confirmacion,
.panel-requisitos {
    background: var(--bg-secondary);
}

.lista-requisitos-confirmacion li {
    background: var(--bg-primary);
    border-left: 4px solid var(--color-principal);
}

/* Checkbox de confirmación */
.confirmacion-checkbox {
    background: var(--warning-bg);
    border: 2px solid var(--color-acento);
}

.checkbox-label {
    color: var(--text-principal);
    font-weight: 600;
}

/* Mensaje importante */
.mensaje-importante {
    background: var(--warning-bg);
    border-left: 4px solid var(--color-acento);
}

.mensaje-importante h3 {
    color: var(--color-principal);
}

/* Modal de éxito */
.modal-exito h2 {
    color: var(--color-principal);
}

.icono-exito {
    background: var(--success-bg);
    border-radius: 50%;
    padding: 20px;
    display: inline-block;
}

/* ===================================
   BOTONES
   =================================== */

.btn-primary {
    background: var(--color-principal);
    color: var(--color-blanco);
    border: 2px solid var(--color-principal);
}

.btn-primary:hover {
    background: #1f2559;
    border-color: #1f2559;
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.btn-secondary {
    background: #6c757d;
    color: var(--color-blanco);
    border: 2px solid #6c757d;
}

.btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
}

/* Botones de requisitos */
.btn-requisito {
    background: linear-gradient(135deg, var(--color-principal) 0%, #3d4a9f 100%);
    color: var(--color-blanco);
    border: 2px solid var(--color-principal);
    box-shadow: 0 4px 15px var(--shadow);
}

.btn-requisito:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-hover);
}

.btn-requisito .icon-svg {
    filter: brightness(0) saturate(100%) invert(100%); /* Blanco */
}

/* ===================================
   HEADER
   =================================== */

.header-ciudadano {
    background: linear-gradient(135deg, var(--color-principal) 0%, #3d4a9f 100%);
    color: var(--color-blanco);
}

.header-ciudadano h1,
.header-ciudadano h2 {
    color: var(--color-blanco);
}

/* ===================================
   CALENDARIO
   =================================== */

.dia-header {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.horario-slot.disponible {
    background: var(--color-principal);
    color: var(--color-blanco);
    border: 2px solid var(--color-principal);
}

.horario-slot.disponible:hover {
    background: #1f2559;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow-hover);
}

.horario-slot.ocupado {
    background: #e9ecef;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

.badge-disponible {
    background: var(--color-acento);
    color: var(--text-primary);
}

.badge-ocupado {
    background: #6c757d;
    color: white;
}

/* ===================================
   INPUTS Y FORMULARIOS
   =================================== */

input,
select,
textarea {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 3px rgba(42, 51, 124, 0.1);
}

/* ===================================
   BADGES Y ESTADOS
   =================================== */

.badge-pendiente {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--color-acento);
}

.badge-confirmada {
    background: var(--info-bg);
    color: var(--color-principal);
    border: 1px solid var(--color-principal);
}

.badge-completada {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-icon);
}

.badge-cancelada {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-icon);
}

/* ===================================
   SOMBRAS Y ELEVACIONES
   =================================== */

.card,
.modal-content {
    box-shadow: 0 2px 10px var(--shadow);
}

.card:hover {
    box-shadow: 0 4px 20px var(--shadow-hover);
}

/* ===================================
   TÍTULOS Y TEXTOS
   =================================== */

h1, h2, h3, h4 {
    color: var(--color-principal);
}

.titulo-seccion h1 {
    color: var(--color-principal);
}

.seccion-requisitos h3 {
    color: var(--color-principal);
}

/* ===================================
   TRANSICIONES
   =================================== */

* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                filter 0.3s ease,
                box-shadow 0.3s ease;
}

button,
a,
.horario-slot,
.btn-requisito {
    transition: all 0.3s ease;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .info-cita-resumen {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   IMPRESIÓN
   =================================== */

@media print {
    * {
        color: #000 !important;
        background: #fff !important;
    }
}

/* ===================================
   UTILIDADES
   =================================== */

.text-principal {
    color: var(--color-principal);
}

.text-acento {
    color: var(--color-acento);
}

.bg-principal {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.bg-acento {
    background: var(--color-acento);
    color: var(--text-primary);
}

.border-principal {
    border-color: var(--color-principal);
}

.border-acento {
    border-color: var(--color-acento);
}

/* ===================================
   PANEL DE REQUISITOS INFORMATIVOS
   =================================== */

.panel-requisitos {
    background: var(--bg-secondary);
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
    border: 2px solid var(--color-principal);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-requisitos h4 {
    color: var(--color-principal);
    margin-bottom: 15px;
    font-size: 1.3em;
}

.lista-requisitos {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.lista-requisitos li {
    background: var(--bg-primary);
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 4px solid var(--color-principal);
    display: flex;
    align-items: center;
    gap: 10px;
}

.lista-requisitos li:before {
    content: "✓";
    color: var(--color-principal);
    font-weight: bold;
    font-size: 1.2em;
}

.btn-cerrar-requisitos {
    background: var(--color-acento);
    color: var(--text-primary);
    border: 2px solid var(--color-acento);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cerrar-requisitos:hover {
    background: transparent;
    color: var(--color-acento);
}