/*
 * TEMA: ISLA CUBA - VERDE ORIGINAL
 * Para usar consistentemente en todo el proyecto
 */

:root {
   /* COLORES PRINCIPALES */
   --verde-principal: #28a745;
   /* Bootstrap success */
   --verde-secundario: #20c997;
   /* Bootstrap teal */
   --verde-claro: #eafaf1;
   --verde-muy-claro-1: #eafaf1;
   --verde-muy-claro-2: #f4fdf9;
   --verde-oscuro: #218838;
   /* Gradiente personalizado */
   --fondo-neutro: #f8f9fa;
   /* Bootstrap light */

   /* VARIABLES DE TEXTO PARA TEMAS */
   --text-modal-success: var(--verde-principal);
   --text-modal-danger: #dc3545;
   --whatsapp-color: #25D366;
}

/* SOBRESCRIBIR CLASES DE BOOTSTRAP PARA ASEGURAR CONSISTENCIA */
.text-success {
   color: var(--text-modal-success) !important;
}

.bg-success {
   background-color: var(--verde-principal) !important;
   color: white !important;
}

.btn-success {
   background-color: var(--verde-principal) !important;
   border-color: var(--verde-principal) !important;
   color: white !important;
}

.btn-success:hover {
   background-color: var(--verde-oscuro) !important;
   border-color: var(--verde-oscuro) !important;
}

.btn-outline-success {
   color: var(--verde-principal) !important;
   border-color: var(--verde-principal) !important;
}

.btn-outline-success:hover {
   background-color: var(--verde-principal) !important;
   color: white !important;
}

/* ALIAS PARA COMPATIBILIDAD */
:root {
   --color-principal: var(--verde-principal);
   --color-secundario: var(--verde-secundario);
   --color-borde: var(--verde-principal);

   /* GRADIENTES */
   --gradiente-header: linear-gradient(135deg, var(--verde-principal), var(--verde-secundario));
   --gradiente-alerta: linear-gradient(135deg, var(--verde-claro), #c3e6cb);
   --gradiente-seccion: linear-gradient(135deg, var(--verde-muy-claro-1), var(--verde-muy-claro-2));
   --gradiente-boton: linear-gradient(135deg, var(--verde-principal), var(--verde-secundario));

   /* BORDES Y FORMAS */
   --border-radius-modal: 15px;
   --border-radius-campos: 8px;
   --border-radius-secciones: 10px;
   --sombra-modal: 0 10px 30px rgba(0, 0, 0, 0.1);

   /* ESPACIADO */
   --padding-modal-body: 2rem;
   --padding-modal-footer: 1.5rem;
   --altura-campos: 38px;
}

/* CLASES UTILITARIAS PARA MODALES (Incorporadas para no usar modal-colors.css) */
.modal-colors-header {
   background: var(--gradiente-header) !important;
   border: none !important;
   border-radius: var(--border-radius-modal) var(--border-radius-modal) 0 0 !important;
   padding: 1rem 1.5rem !important;
}

.modal-colors-body {
   background: var(--fondo-neutro) !important;
   padding: var(--padding-modal-body) !important;
}

.modal-colors-footer {
   background: var(--fondo-neutro);
   border: none;
   border-radius: 0 0 var(--border-radius-modal) var(--border-radius-modal);
   padding: var(--padding-modal-footer);
}

.modal-colors-container {
   border: none !important;
   border-radius: var(--border-radius-modal) !important;
   box-shadow: var(--sombra-modal) !important;
   overflow: hidden !important;
}

/* Forzar estilos cuando se usa con Bootstrap cards */
.card.modal-colors-container {
   border: none !important;
   border-radius: var(--border-radius-modal) !important;
   box-shadow: var(--sombra-modal) !important;
}

.card.modal-colors-container .card-header.modal-colors-header {
   background: var(--gradiente-header) !important;
   border: none !important;
   border-bottom: none !important;
   border-radius: var(--border-radius-modal) var(--border-radius-modal) 0 0 !important;
}

.card.modal-colors-container .card-body.modal-colors-body {
   background: var(--fondo-neutro) !important;
   border: none !important;
}

/* ALERTAS */
.alert-modal-info {
   background: var(--gradiente-alerta);
   border: none;
   border-radius: var(--border-radius-secciones);
   color: var(--verde-principal);
}

.text-modal-danger {
   color: #dc3545 !important;
}

/* SECCIONES */
.section-modal-precios {
   background: var(--gradiente-seccion);
   border: 1px solid var(--verde-claro);
   border-radius: var(--border-radius-secciones);
}

/* CAMPOS DE FORMULARIO */
.form-control-modal,
.form-control.form-control-modal,
input.form-control-modal,
textarea.form-control-modal {
   border-color: var(--color-borde) !important;
   border-radius: var(--border-radius-campos) !important;
   border-width: 1px !important;
   border-style: solid !important;
   height: var(--altura-campos) !important;
   line-height: var(--altura-campos) !important;
   padding: 0.375rem 0.75rem !important;
   background-color: white !important;
}

.form-control-modal:focus {
   border-color: var(--gris-oscuro) !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1) !important;
}

/* Textarea debe tener altura automática */
textarea.form-control-modal {
   height: auto !important;
   min-height: calc(var(--altura-campos) * 2) !important;
   line-height: 1.5 !important;
}

/* Campos de teléfono con intl-tel-input */
.iti {
   width: 100%;
   display: block;
   position: relative;
}

/* Contenedor de la bandera - dentro del input, sin bordes propios */
.iti__flag-container {
   position: absolute !important;
   top: 0 !important;
   bottom: 0 !important;
   left: 0 !important;
   padding: 0 !important;
   border: none !important;
   background-color: transparent !important;
   z-index: 2 !important;
}

.iti__selected-flag {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
   padding: 0 8px !important;
   border: none !important;
   background-color: transparent !important;
}

/* Campo de teléfono completo con borde verde */
.iti input.form-control,
.iti input.form-control-modal,
.iti .form-control {
   border: 1px solid var(--color-borde) !important;
   border-radius: var(--border-radius-campos) !important;
   padding-left: 52px !important;
   height: 38px !important;
   line-height: 38px !important;
}

/* Eliminar cualquier borde gris y efectos */
.iti__flag-container,
.iti__selected-flag,
.iti__flag-container:hover,
.iti__selected-flag:hover,
.iti__flag-container:focus,
.iti__selected-flag:focus {
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
}

.form-select-modal,
select.form-select-modal {
   border-color: var(--color-borde) !important;
   border-radius: var(--border-radius-campos) !important;
   border-width: 1px !important;
   border-style: solid !important;
   height: var(--altura-campos) !important;
   padding-top: 0.375rem !important;
   padding-bottom: 0.375rem !important;
   padding-left: 0.75rem !important;
   padding-right: 2.25rem !important;
   display: flex !important;
   align-items: center !important;
   line-height: 1.5 !important;
}

/* LABELS */
.label-modal,
label.label-modal,
.form-label.label-modal {
   color: var(--verde-principal) !important;
   font-weight: bold !important;
   font-size: 0.95rem !important;
   margin-bottom: 0.5rem !important;
}

.label-modal i,
label.label-modal i,
.form-label.label-modal i {
   color: var(--verde-principal) !important;
}

/* BOTONES */
.btn-modal-generar {
   background: var(--gradiente-boton) !important;
   border: none !important;
   border-radius: var(--border-radius-campos) !important;
   color: white !important;
   font-weight: bold !important;
   padding: 0.5rem 1.5rem !important;
   transition: all 0.3s ease;
}

.btn-modal-generar i {
   color: white !important;
}

.btn-modal-generar:hover {
   background: linear-gradient(135deg, #218838, #1aa179) !important;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-modal-cancelar {
   background-color: #6c757d !important;
   border: 1px solid #6c757d !important;
   border-radius: var(--border-radius-campos) !important;
   color: white !important;
   font-weight: bold !important;
   padding: 0.5rem 1.5rem !important;
   transition: all 0.3s ease;
}

.btn-modal-cancelar:hover {
   background-color: #5a6268 !important;
   border-color: #5a6268 !important;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
   color: white !important;
}

.btn-modal-cancelar i {
   color: white !important;
}

.btn-modal-limpiar {
   border-radius: var(--border-radius-campos);
}

/* Botón de "Ver" / "Ojito" - Fondo verde claro */
.btn-modal-ver {
   background-color: #d4edda !important;
   border-color: var(--color-borde) !important;
   border-radius: var(--border-radius-campos) !important;
   color: #155724 !important;
   padding: 0.25rem 0.5rem !important;
}

.btn-modal-ver:hover {
   background-color: #c3e6cb !important;
   color: #155724 !important;
}

.btn-modal-ver i {
   color: #155724 !important;
}

/* CHECKBOX */
.form-check-input-modal {
   border-color: var(--verde-principal);
}

.form-check-label-modal {
   color: var(--verde-principal);
   font-weight: bold;
}

/* TÍTULOS */
.modal-title-colors {
   color: white !important;
   font-weight: bold !important;
   font-size: 1.1rem !important;
   margin: 0 !important;
}

.modal-title-colors i {
   color: white !important;
}

/* ICONOS */
.icon-modal-success {
   color: var(--verde-principal);
}

.icon-modal-warning {
   color: #ffc107;
}

.icon-modal-danger {
   color: #dc3545;
}

/* TEXTOS */
.text-modal-success,
h1.text-modal-success,
h2.text-modal-success,
h3.text-modal-success,
h4.text-modal-success,
h5.text-modal-success,
h6.text-modal-success {
   color: var(--verde-principal) !important;
   font-weight: 600 !important;
}

.text-modal-success i,
h1.text-modal-success i,
h2.text-modal-success i,
h3.text-modal-success i,
h4.text-modal-success i,
h5.text-modal-success i,
h6.text-modal-success i {
   color: var(--verde-principal) !important;
}

/* TABLAS Y DATATABLES - FONDO VERDE SÓLIDO COMO INVENTARIO */
div.dataTables_wrapper table.dataTable thead,
table.table.dataTable thead {
   background: linear-gradient(135deg, #28a745, #20c997) !important;
   background-color: #28a745 !important;
}

div.dataTables_wrapper table.dataTable thead th,
table.table.dataTable thead th {
   color: white !important;
   font-weight: bold !important;
   text-transform: uppercase;
   font-size: 0.85rem;
   border: none !important;
}

/* NAVBAR Y FOOTER CON COLORES DEL MODAL */
.navbar-custom {
   background-color: var(--fondo-neutro) !important;
   border-bottom: 1px solid var(--verde-claro);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-nav .nav-link {
   color: var(--verde-principal) !important;
   font-weight: 600 !important;
}

.navbar-nav .nav-link:hover {
   color: var(--verde-secundario) !important;
   text-decoration: underline;
}

/* CONFIGURACIÓN FONDO NEGRO (OPCIONAL/SECUNDARIO) */
.bg-dark-theme {
   background-color: #000 !important;
   color: white !important;
}

.bg-dark-theme .card {
   background-color: #1a1a1a !important;
   border: 1px solid #333 !important;
   color: white !important;
}

.bg-dark-theme .text-muted {
   color: #aaa !important;
}