/* static/css/themes/variables-suave.css */
/* 🌸 TEMA SUAVE - Beige Cálido y Crema como protagonistas */

:root {
  /* ===== COLORES PRINCIPALES ===== */
  --color-primary: #e6ccb3;           /* Beige cálido (navbar) */
  --color-primary-hover: #f0dcc8;     /* Beige más claro (hover) */
  --color-primary-light: #f8ead8;     /* Beige muy claro */
  --color-primary-pale: #e6ccb380;    /* Beige transparente */
  
  /* ===== COLORES SECUNDARIOS ===== */
  --color-secondary: #f3e5d8;         /* Crema (botones principales, acentos) */
  --color-secondary-hover: #faf0e6;   /* Crema más claro hover */
  --color-accent: #c2c2a3;            /* Verde sage suave (detalles sutiles) */
  
  /* ===== FONDOS ===== */
  --color-bg-main: #ffffff;
  --color-bg-section-light: #fefefe;
  --color-bg-pale-blue: #f3e5d8;      /* Crema (w3-pale-blue) */
  --color-bg-pale-cyan: #f8ead8;      /* Beige muy claro (w3-pale-cyan) */
  --color-bg-dark: #8b7355;           /* Marrón tierra para contraste */
  
  /* ===== TEXTOS ===== */
  --color-text-primary: #5a4a3a;      /* Marrón oscuro para textos */
  --color-text-secondary: #8b7355;    /* Marrón medio */
  --color-text-light: #ffffff;
  --color-text-grey: #a39181;
  
  /* ===== ESTADOS Y ACCIONES ===== */
  --color-success: #9db89d;           /* Verde suave (mantiene funcionalidad) */
  --color-success-light: #b8d4b8;     /* Verde muy claro */
  --color-error: #d4a5a5;             /* Rojo suave */
  --color-warning: #e6ccb3;           /* Beige cálido para warnings */
  --color-info: #cce6ff;              /* Azul pastel para información */
  --color-cancel: #d4a5a5;
  
  /* ===== BOTONES ===== */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--color-text-primary);
  --btn-primary-hover-opacity: 0.85;
  
  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-text: var(--color-text-primary);
  
  --btn-success-bg: var(--color-success);
  --btn-danger-bg: var(--color-error);
  --btn-dark-bg: #8b7355;
  
  /* ===== NAVBAR ===== */
  --navbar-bg: var(--color-primary);           /* Beige cálido */
  --navbar-text: var(--color-text-primary);
  --navbar-hover-bg: var(--color-secondary);   /* Crema al hover */
  --navbar-hover-text: var(--color-text-primary);
  --navbar-active-bg: #8b7355;                 /* Marrón tierra */
  
  /* ===== BORDES Y SOMBRAS ===== */
  --border-color: #e6ccb3;            /* Beige cálido para bordes */
  --border-color-light: #f3e5d8;      /* Crema para bordes suaves */
  --shadow-sm: 0 1px 3px rgba(230, 204, 179, 0.2);
  --shadow-md: 0 4px 8px rgba(230, 204, 179, 0.25);
  --shadow-lg: 0 10px 20px rgba(230, 204, 179, 0.3);
  
  /* ===== CARDS Y TABLAS ===== */
  --card-bg: var(--color-bg-main);
  --card-border: 1px solid var(--border-color);
  --card-shadow: var(--shadow-md);
  
  --table-header-bg: #e6ccb3;         /* Beige cálido */
  --table-header-text: var(--color-text-primary);
  --table-border: var(--border-color);
  
  /* ===== MODALES ===== */
  --modal-overlay-bg: rgba(90, 74, 58, 0.4);
  --modal-content-bg: var(--color-bg-section-light);
  --modal-border: 2px solid var(--color-primary);
  
  /* ===== FORMULARIOS ===== */
  --input-border: 1px solid var(--border-color);
  --input-padding: 12px 20px;
  --input-focus-border: var(--color-primary);
  
  /* ===== GRADIENTES ===== */
  --gradient-primary: linear-gradient(135deg, #e6ccb3 0%, #f3e5d8 100%);
  --gradient-overlay: rgba(230, 204, 179, 0.3);
  
  /* ===== SPACING ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  
  /* ===== TRANSICIONES ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.6s ease;
}

/* ===== ESTILOS ESPECÍFICOS PARA MEJORAR EL TEMA ===== */

/* Cards de gestión con los colores personalizados */
.card.success {
    background-color: #9db89d !important;
    color: #ffffff !important;
}

.card.warning {
    background-color: #e6ccb3 !important;
    color: #5a4a3a !important;
}

.card.info {
    background-color: #e6ccb3 !important;
    color: #5a4a3a !important;
}

.card.error {
    background-color: #d4a5a5 !important;
    color: #ffffff !important;
}

/* Mejora visual para botones en este tema */
button.w3-green,
.w3-button.w3-green {
    background-color: #9db89d !important;
    color: #ffffff !important;
}

button.w3-indigo,
.w3-button.w3-indigo {
    background-color: #e6ccb3 !important;
    color: #5a4a3a !important;
}

button.w3-red,
.w3-button.w3-red {
    background-color: #d4a5a5 !important;
    color: #ffffff !important;
}

button.w3-black,
.w3-button.w3-black {
    background-color: #8b7355 !important;
    color: #ffffff !important;
}

button.w3-yellow,
.w3-button.w3-yellow {
    background-color: #f0dcc8 !important;
    color: #5a4a3a !important;
}

/* Hover suave para navbar con transición beige -> crema */
.navbar a:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-primary) !important;
}

.navbar a.active {
    background-color: #8b7355 !important;
    color: #ffffff !important;
}

/* Backgrounds personalizados con protagonismo de beige y crema */
body.bg-primary {
    background-color: #f3e5d8 !important;
}

body.bg-secondary {
    background-color: #f8ead8 !important;
}

/* Secciones con fondos crema/beige */
.w3-pale-cyan {
    background-color: #f8ead8 !important;
}

.w3-pale-blue {
    background-color: #f3e5d8 !important;
}

/* Quiz - ajuste de colores para mejor legibilidad */
input:checked + label {
    background: #e6ccb3 !important;
    color: #5a4a3a !important;
}

label.radio-label:hover {
    background: linear-gradient(to right, #f3e5d8 10%, #ffffff 80%) !important;
}

/* Switch/Toggle con colores del tema */
input:checked + .slider {
    background-color: #e6ccb3 !important;
}

.slider {
    background-color: #d4c4b4 !important;
}

/* Tabs con los colores cálidos */
.tab {
    background-color: #faf8f6 !important;
}

.tab button.active {
    background-color: #e6ccb3 !important;
    color: #5a4a3a !important;
}

.tab button:hover {
    background-color: #f3e5d8 !important;
}

/* Sombras cálidas y suaves para este tema */
.w3-card,
.w3-card-4 {
    box-shadow: 0 4px 12px rgba(230, 204, 179, 0.2) !important;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(230, 204, 179, 0.3) !important;
}

/* Avatar con borde beige */
img.avatar {
    border: 3px solid #e6ccb3 !important;
}

/* Mejora de contraste en tablas con fondos crema */
.table tr:hover,
.w3-table-all tr:hover {
    background-color: #f3e5d8 !important;
}

/* Comentarios y cards con el tema cálido */
.w3-container.w3-card {
    border: 1px solid #e6ccb3;
    box-shadow: 0 2px 8px rgba(230, 204, 179, 0.15);
    background-color: #fefefe;
}

.w3-container.w3-white {
    background-color: #fefefe !important;
}

/* Inputs con borde beige */
input[type=text]:focus, 
input[type=password]:focus, 
input[type=tel]:focus, 
input[type=email]:focus,
textarea:focus {
    border-color: #e6ccb3 !important;
    box-shadow: 0 0 5px rgba(230, 204, 179, 0.3);
}

/* Modales con overlay cálido */
.modal {
    background-color: rgba(139, 115, 85, 0.4) !important;
}

.modal-content {
    background-color: #fefefe !important;
    border: 2px solid #e6ccb3 !important;
}

/* Botón cerrar con color del tema */
.close:hover,
.close:focus {
    color: #d4a5a5 !important;
}

.closebtn:hover {
    color: #8b7355 !important;
}

/* Columnas de gestión con mejor integración */
.column {
    transition: transform 0.3s ease;
}

.column:hover {
    transform: translateY(-2px);
}