/* custom.css */

/* — Formularios — */
.form-control {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-control:focus {
  background-color: #fff;
  border-color: #4e73df;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
  outline: none;
}

/* — Tarjetas más suaves — */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* — Botones redondeados y con gradiente ligero — */
.btn-primary {
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  background-image: linear-gradient(45deg, #1cc88a, #17a673);
  border: none;
  transition: background-image 0.2s ease;
}
.btn-primary:hover {
  background-image: linear-gradient(45deg, #17a673, #138756);
}

/* — Inputs pequeños para filtros — */
.input-group .form-control,
.form-control-sm {
  border-radius: 1.5rem;
}

/* — Navbar más moderna — */
.main-header.navbar {
  border-bottom: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* — Ajuste de badges — */
.navbar-badge {
  border-radius: 50%;
  font-size: 0.7rem;
  padding: 0.25em 0.4em;
}

/* — Links dentro de dropdown — */
.dropdown-item {
  border-radius: 0.5rem;
  margin: 0.2rem 0;
  transition: background-color 0.2s ease;
}
.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* — Inputs y textareas bien acolchados, pero selects algo más compactos — */
input.form-control,
textarea.form-control {
  padding: 0.75rem 1rem;
}
select.form-control {
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  line-height: 1.5;
}

/* — Campos deshabilitados / readonly — */
input.form-control[disabled],
input.form-control[readonly],
textarea.form-control[disabled],
textarea.form-control[readonly],
select.form-control[disabled],
select.form-control[readonly] {
  background-color: #934848 !important;   /* gris suave */
  color: #2e69a4 !important;               /* texto legible */
  border: 1px solid #ced4da !important;    /* borde consistente */
  opacity: 1 !important;                   /* elimina transparencia */
  cursor: not-allowed;
}

/* — Form-control-plaintext (solo lectura) — */
.form-control-plaintext {
  background-color: #e0e0e0 !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  padding: .375rem .75rem; /* padding similar a form-control */
}

/* — Select2 deshabilitado — */
.select2-container--default.select2-container--disabled .select2-selection {
  background-color: #e0e0e0 !important;
  border: 1px solid #ced4da !important;
  color: #2e5c8b !important;
  cursor: not-allowed;
}

/* — Placeholder en campos bloqueados — */
input[disabled]::placeholder,
input[readonly]::placeholder,
textarea[disabled]::placeholder,
textarea[readonly]::placeholder {
  color: #6c757d !important;
}

/* Cualquier form-control deshabilitado u readonly (input, textarea, select) */
input.form-control[disabled],
input.form-control[readonly],
textarea.form-control[disabled],
textarea.form-control[readonly],
select.form-control[disabled],
select.form-control[readonly] {
  background-color: #e0e0e0 !important;
  color: #31659a !important;
  border: 1px solid #ced4da !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Y los que tengan clase plaintext */
.form-control-plaintext,
.form-control-plaintext[disabled],
.form-control-plaintext[readonly],
textarea.form-control-plaintext,
textarea.form-control-plaintext[disabled],
textarea.form-control-plaintext[readonly] {
  background-color: #e0e0e0 !important;
  color: #495057 !important;
  border: 1px solid #ced4da !important;
  padding: .375rem .75rem; /* igual que los campos normales */
  cursor: not-allowed;
}

/* Custom CSS para campos de solo lectura con Select2 */
.form-control-plaintext[readonly] {
    background-color: #e9ecef; /* Un gris claro para el fondo */
    opacity: 1; /* Asegura que el color de fondo no sea transparente */
    cursor: default; /* Cambia el cursor del ratón a una flecha por defecto, no a un cursor de texto */
}

/* Ajustes específicos para Select2 */
/* Select2 reemplaza tus <select> originales con una estructura compleja de <div> y <input>.
   Necesitamos apuntar al contenedor visible que crea Select2. */
.select2-container--default .select2-selection--single.form-control-plaintext[readonly] {
    background-color: #e9ecef; /* Fondo gris para el Select2 visible */
    cursor: default;
}
.select2-container--default .select2-selection--single.form-control-plaintext[readonly] .select2-selection__arrow {
    display: none; /* Oculta la flecha desplegable del Select2, reforzando que no es interactivo */
}
.select2-container--default .select2-selection--single.form-control-plaintext[readonly] .select2-selection__rendered {
    color: #495057; /* Asegura que el texto dentro del Select2 sea legible (no demasiado claro) */
}

/* — Estilos para la página de Login — */
.login-page .login-box {
  width: 400px;
}

.login-page .card {
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Para que los bordes redondeados afecten a los hijos */
}

.login-page .login-logo a {
  color: #4a4a4a;
  font-weight: 300;
}

.login-page .login-card-body {
  padding: 2rem;
}

.login-page .login-box-msg {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #6c757d;
}

.login-page .input-group .form-control {
  border-radius: 0.5rem !important; /* Bordes redondeados para inputs */
}

.login-page .input-group .input-group-text {
  border-radius: 0.5rem;
  background-color: transparent;
  border-left: none;
}

.login-page .btn-primary {
  border-radius: 0.5rem !important;
  padding: 0.75rem;
  font-weight: bold;
}

.login-page .icheck-primary label {
  font-weight: normal;
}

/*
 * =================================================================
 *   ESTILOS PARA MODO OSCURO
 * =================================================================
 */
body.dark-mode {
  /* Color de texto general para formularios y etiquetas */
  color: #c2c7d0;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .form-text,
body.dark-mode .form-group > label,
body.dark-mode div > label {
  color: #e9ecef !important; /* Un color de texto más brillante y fuerte para etiquetas */
}

/* Asegurar que el texto dentro de los paneles/tarjetas sea legible */
body.dark-mode .card .card-body {
  color: #c2c7d0;
}

/* Estilos para campos deshabilitados */
input:disabled,
input[readonly] {
    background-color: #6c757d !important; /* Un gris más oscuro */
    color: #fff !important;
    cursor: not-allowed;
}

/* --- ESTILOS UNIFICADOS PARA LOGIN, REGISTRO Y FORMULARIOS OSCUROS --- */

/* La clase .dark-mode la añade AdminLTE al body */
.dark-mode .login-page,
.dark--mode .register-page,
.dark-mode {
    background-color: #343a40 !important; /* Fondo gris oscuro principal */
    color: #f8f9fa; /* Texto principal claro */
}

/* Estilo para las tarjetas/contenedores de formularios */
.dark-mode .card,
.dark-mode .login-box .card,
.dark-mode .register-box .card {
    background-color: #454d55; /* Un gris un poco más claro para las tarjetas */
    border: 1px solid #6c757d;
    color: #f8f9fa;
}

.dark-mode .card-header {
    border-bottom: 1px solid #6c757d;
}

/* Estilo para los campos de formulario */
.dark-mode .form-control {
    background-color: #212529; /* Fondo muy oscuro para inputs */
    color: #f8f9fa; /* Texto blanco */
    border: 1px solid #6c757d;
}

.dark-mode .form-control:focus {
    background-color: #212529;
    color: #f8f9fa;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.dark-mode .form-control::placeholder {
    color: #adb5bd; /* Placeholder más claro */
}

/* Estilo para los labels y texto de ayuda */
.dark-mode label,
.dark-mode .form-text,
.dark-mode .text-muted {
    color: #ced4da !important;
}

/* Estilo para los iconos de los input groups */
.dark-mode .input-group-text {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #6c757d;
}

/* --- ESTILOS PARA FORMULARIO DE CAMBIAR CONTRASEÑA --- */

.dark-mode .card-primary.card-outline {
    border-top: 3px solid #17a2b8; /* Mantenemos un color de acento de AdminLTE */
}

/* Estilos para el botón verde de éxito */
.btn-success {
    background-color: #28a745; /* Verde de éxito de Bootstrap */
    border-color: #28a745;
}

.dark-mode .btn-success {
    background-color: #218838; /* Un verde ligeramente más oscuro para el hover/focus */
    border-color: #1e7e34;
}

.dark-mode .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Estilos para el fondo del header en la página de perfil */
.perfil-header {
    background: linear-gradient(rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.5)), url('../../img/perfil.jpg');
    background-repeat: repeat; /* Usamos 'repeat' para crear una textura y evitar pixelado */
}

/* Para el modo oscuro, solo ajustamos el gradiente para que sea un poco más oscuro */
body.dark-mode .perfil-header {
    background: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.6)), url('../../img/perfil.jpg');
    background-repeat: repeat;
}

/* ===== Tarjetas de módulos (Inicio) ===== */
.small-box.module-card {
  color: #fff !important;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden;
}

/* Asegurar altura consistente y que llenen el alto de su columna */
.small-box.module-card { min-height: 120px; }
.small-box-link, .small-box.module-card { display: flex; width: 100%; }
.small-box.module-card { flex-direction: column; justify-content: space-between; }

/* Títulos de categoría más discretos y centrados */
.category-title {
  font-weight: 700;
  color: #2f3d4a;
  letter-spacing: .3px;
  opacity: .85;
}
.dark-mode .category-title {
  color: #ffffff !important;
  opacity: 1;
}
.small-box.module-card .inner h3 { font-weight: 800; letter-spacing: .3px; color:#fff !important; font-size: 1.6rem; margin-bottom: .35rem; }
.small-box.module-card .inner p { opacity: .95; color:#fff !important; margin-bottom: .25rem; font-size: .95rem; }
.small-box.module-card .icon { opacity: .42; transform: none; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); position: absolute; top: 10px; right: 16px; bottom: auto; }
.small-box.module-card .icon i { color:#fff !important; font-size: 56px; line-height: 1; }
.small-box.module-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,0.28); filter: saturate(1.08); }
.small-box.module-card .small-box-footer { background: rgba(255,255,255,.16); color: #fff !important; border-top: 0; padding: .35rem .75rem; }

/* Gradientes vistosos */
/* Paleta tierra (tonos más calmados) */
.bg-gradient-1 { background: linear-gradient(135deg, #556B2F 0%, #8F9779 100%) !important; } /* oliva → salvia */
.bg-gradient-2 { background: linear-gradient(135deg, #7B5E57 0%, #B08968 100%) !important; } /* terracota suave → arcilla */
.bg-gradient-3 { background: linear-gradient(135deg, #6B705C 0%, #A5A58D 100%) !important; } /* salvia gris → caqui */
.bg-gradient-4 { background: linear-gradient(135deg, #5E503F 0%, #A47148 100%) !important; } /* sombra tostada → siena */
.bg-gradient-5 { background: linear-gradient(135deg, #4F6D6A 0%, #8BA39E 100%) !important; } /* verde pizarra → verde humo */
.bg-gradient-6 { background: linear-gradient(135deg, #6D6875 0%, #B8A1A1 100%) !important; } /* malva grisáceo → topo claro */

/* ===== Paletas alternativas con clase en <body> para vista previa rápida ===== */
/* Paleta Arena & Bosque */
.palette-arena .bg-gradient-1 { background: linear-gradient(135deg,#C2B280,#8D8741) !important; }
.palette-arena .bg-gradient-2 { background: linear-gradient(135deg,#A47551,#D7C4A1) !important; }
.palette-arena .bg-gradient-3 { background: linear-gradient(135deg,#6E6658,#B3A580) !important; }
.palette-arena .bg-gradient-4 { background: linear-gradient(135deg,#8C6A5B,#B08968) !important; }
.palette-arena .bg-gradient-5 { background: linear-gradient(135deg,#5B6D5B,#A3B18A) !important; }
.palette-arena .bg-gradient-6 { background: linear-gradient(135deg,#6F7D8C,#B0B7C3) !important; }

/* Paleta Café & Crema */
.palette-cafe .bg-gradient-1 { background: linear-gradient(135deg,#7A5C49,#E6D5C3) !important; }
.palette-cafe .bg-gradient-2 { background: linear-gradient(135deg,#6B4F4F,#C9B2A0) !important; }
.palette-cafe .bg-gradient-3 { background: linear-gradient(135deg,#5F6F52,#C1C7B7) !important; }
.palette-cafe .bg-gradient-4 { background: linear-gradient(135deg,#8F7A66,#D7C7B2) !important; }
.palette-cafe .bg-gradient-5 { background: linear-gradient(135deg,#55676A,#AAB8B6) !important; }
.palette-cafe .bg-gradient-6 { background: linear-gradient(135deg,#716969,#C9C0BB) !important; }

/* Paleta Pastel Pop (juvenil y suave) */
.palette-pastel .bg-gradient-1 { background: linear-gradient(135deg,#A1C4FD,#C2E9FB) !important; }
.palette-pastel .bg-gradient-2 { background: linear-gradient(135deg,#FBC2EB,#A6C1EE) !important; }
.palette-pastel .bg-gradient-3 { background: linear-gradient(135deg,#F6D365,#FDA085) !important; }
.palette-pastel .bg-gradient-4 { background: linear-gradient(135deg,#84FAB0,#8FD3F4) !important; }
.palette-pastel .bg-gradient-5 { background: linear-gradient(135deg,#B8F2E6,#A6E3E9) !important; }
.palette-pastel .bg-gradient-6 { background: linear-gradient(135deg,#FFD1FF,#C2C2F0) !important; }

/* Paleta Atardecer Suave */
.palette-sunset .bg-gradient-1 { background: linear-gradient(135deg,#FF9A9E,#FAD0C4) !important; }
.palette-sunset .bg-gradient-2 { background: linear-gradient(135deg,#A18CD1,#FBC2EB) !important; }
.palette-sunset .bg-gradient-3 { background: linear-gradient(135deg,#F6D365,#FDA085) !important; }
.palette-sunset .bg-gradient-4 { background: linear-gradient(135deg,#FBD3E9,#BBDAF1) !important; }
.palette-sunset .bg-gradient-5 { background: linear-gradient(135deg,#FBC2EB,#A6C1EE) !important; }
.palette-sunset .bg-gradient-6 { background: linear-gradient(135deg,#FFE29F,#FFA99F) !important; }

/* Paleta Aqua Mint (fresca, juvenil) */
.palette-aqua .bg-gradient-1 { background: linear-gradient(135deg,#5EE7DF,#B490CA) !important; }
.palette-aqua .bg-gradient-2 { background: linear-gradient(135deg,#90F7EC,#32CCBC) !important; }
.palette-aqua .bg-gradient-3 { background: linear-gradient(135deg,#96E6A1,#D4FC79) !important; }
.palette-aqua .bg-gradient-4 { background: linear-gradient(135deg,#74EBD5,#9FACE6) !important; }
.palette-aqua .bg-gradient-5 { background: linear-gradient(135deg,#A1FFCE,#FAFFD1) !important; }
.palette-aqua .bg-gradient-6 { background: linear-gradient(135deg,#B2FEFA,#0ED2F7) !important; }

/* Paleta Menta & Oliva (según especificación) */
.palette-mintoliva .bg-gradient-1 { background: linear-gradient(135deg,#A1FFCE,#70E1A1) !important; } /* Consulta Domicilios → Verde menta */
.palette-mintoliva .bg-gradient-2 { background: linear-gradient(135deg,#B7C29B,#E5D0AC) !important; } /* Indicadores Domicilios → Oliva claro → Beige */
.palette-mintoliva .bg-gradient-3 { background: linear-gradient(135deg,#FBD3A2,#E6A57E) !important; } /* Consultar Reservas → Durazno/Terracota clara */
.palette-mintoliva .bg-gradient-4 { background: linear-gradient(135deg,#E9DCC9,#D8B566) !important; } /* Indicadores Reservas → Beige con acento dorado */
.palette-mintoliva .bg-gradient-5 { background: linear-gradient(135deg,#B8F2E6,#A6E3E9) !important; } /* Consulta Encuestas → Aguamarina suave */
.palette-mintoliva .bg-gradient-6 { background: linear-gradient(135deg,#C3CFA6,#A8B77D) !important; } /* Indicadores Encuestas → Verde oliva suave */

/* Paleta Sea Glass (031926, 468189, 77ACA2, 9DBEBB, F4E9CD) */
.palette-seaglass .bg-gradient-1 { background: linear-gradient(135deg,#77ACA2,#9DBEBB) !important; }
.palette-seaglass .bg-gradient-2 { background: linear-gradient(135deg,#468189,#77ACA2) !important; }
.palette-seaglass .bg-gradient-3 { background: linear-gradient(135deg,#468189,#9DBEBB) !important; }
.palette-seaglass .bg-gradient-4 { background: linear-gradient(135deg,#9DBEBB,#F4E9CD) !important; }
.palette-seaglass .bg-gradient-5 { background: linear-gradient(135deg,#031926,#468189) !important; }
.palette-seaglass .bg-gradient-6 { background: linear-gradient(135deg,#77ACA2,#F4E9CD) !important; }

/* Botonera de paleta */
.palette-switcher .btn { border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }
.palette-switcher .btn.active { box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset; }

/* Feedback de fila actualizada en tablas */
.row-updated {
  animation: rowFlash 1.8s ease-out;
}
@keyframes rowFlash {
  0% { background-color: #e7f5ee; }
  100% { background-color: transparent; }
}

/* Selects más agradables visualmente */
.pretty-select {
  border-radius: 999px !important;
  padding-left: 14px !important;
  padding-right: 32px !important;
  background-image: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06));
  border: 1px solid rgba(0,0,0,0.08);
}
.select2-container--bootstrap4 .select2-selection--single {
  border-radius: 999px !important;
  height: calc(1.5em + .75rem + 2px) !important;
  padding: .375rem .75rem !important;
}
.select2-container--bootstrap4 .select2-selection__rendered { line-height: 1.5 !important; }
.select2-container--bootstrap4 .select2-selection__arrow { height: 100% !important; }
.select2-container--bootstrap4 .select2-results__option { padding: .5rem .75rem !important; }

/* Tabla más compacta para consulta de encuestas */
.table-compact th, .table-compact td {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
  vertical-align: middle !important;
}
.filters-compact .card-body { padding: .75rem 1rem; }
.filters-compact .form-control { height: calc(1.25em + .5rem + 2px); padding: .25rem .5rem; }
.filters-compact .select2-container--bootstrap4 .select2-selection--single { height: calc(1.25em + .5rem + 2px) !important; padding: .25rem .5rem !important; }
.filters-compact label.small { margin-bottom: .25rem !important; }

/* Ocultar barra vertical (manteniendo scroll) para vistas que lo requieran */
html.hide-scrollbar, body.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
}
html.hide-scrollbar::-webkit-scrollbar, body.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0; /* Chrome/Safari */
}
.content-wrapper.hide-scrollbar { scrollbar-width: none; }
.content-wrapper.hide-scrollbar::-webkit-scrollbar { width: 0; height: 0; }

/* Ajustes extra de compacidad */
.filters-compact .card-header { padding: .5rem .75rem; }
.filters-compact .card-body { padding: .5rem .75rem; }
.table-compact th, .table-compact td { padding-top: .3rem !important; padding-bottom: .3rem !important; }
.card-footer { padding: .5rem .75rem; }

/* Ocultar barra interna del contenedor de tabla */
.no-scrollbar { overflow-y: hidden !important; }
.no-scrollbar:hover { overflow-y: hidden !important; }
.table-compact td .form-control {
  height: calc(1.25em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .85rem;
}
.table-compact .btn.btn-xs, .table-compact .btn.btn-sm {
  padding: .15rem .4rem; font-size: .8rem;
}
.pretty-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, .25);
  border-color: #3490dc;
}