/* =========================================================
   G&S GOLD TRAVEL - ADMINISTRADOR
   TEMA VISUAL UNIFICADO
   Fondo oscuro + dorado
   Este archivo se carga al FINAL para uniformizar módulos.
   ========================================================= */

html,
body {
    background: var(--fondo-principal-admin) !important;
    color: var(--texto-principal-admin) !important;
}

body,
.admin-pagina,
.admin-contenido,
.contenido,
.contenedor,
main {
    color: var(--texto-principal-admin);
}

/* Paneles y contenedores */
.panel,
.panel-telefonos,
.panel-cabecera,
.formulario-panel,
.card,
.tarjeta,
.bloque,
.seccion-panel,
.contenedor-panel,
.tabla-contenedor {
    background: var(--fondo-panel-admin) !important;
    color: var(--texto-principal-admin) !important;
    border-color: var(--borde-admin) !important;
}

/* Textos */
h1,h2,h3,h4,h5,h6,
.admin-cabecera h1,
.panel-cabecera h2,
.formulario h2,
.formulario h3 {
    color: var(--texto-principal-admin) !important;
}

p,
label,
th,
td,
.admin-cabecera p,
.campo-ayuda,
.texto-ayuda {
    color: var(--texto-secundario-admin);
}

.admin-miga,
.panel-etiqueta,
.etiqueta,
.seccion-titulo {
    color: var(--color-vivo-admin) !important;
}

/* Formularios */
.formulario .campo > input,
.formulario .campo > select,
.formulario .campo > textarea,
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background: var(--fondo-principal-admin) !important;
    color: var(--texto-principal-admin) !important;
    border: var(--borde-fino-admin) !important;
    border-radius: var(--radio-pequeno-admin) !important;
}

.formulario .campo > input::placeholder,
.formulario .campo > textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--texto-secundario-admin) !important;
    opacity: .75;
}

.formulario .campo > input:focus,
.formulario .campo > select:focus,
.formulario .campo > textarea:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--fondo-principal-admin) !important;
    color: var(--texto-principal-admin) !important;
    border-color: var(--color-vivo-admin) !important;
    box-shadow: 0 0 0 3px rgb(242 201 76 / .10) !important;
    outline: none;
}

select option {
    background: var(--fondo-panel-admin) !important;
    color: var(--texto-principal-admin) !important;
}

/* Tablas */
table {
    background: var(--fondo-panel-admin) !important;
    color: var(--texto-principal-admin) !important;
}

thead,
thead tr {
    background: rgb(242 201 76 / .045) !important;
}

th,
td {
    border-color: var(--borde-admin) !important;
}

tbody tr:hover {
    background: rgb(242 201 76 / .035) !important;
}

/* Enlaces */
a {
    color: var(--texto-principal-admin);
}

a:hover {
    color: var(--color-vivo-admin);
}

/* Botones */
.boton-principal {
    background: var(--color-principal-admin) !important;
    border-color: var(--color-principal-admin) !important;
    color: var(--texto-boton-admin) !important;
}

.boton-principal:hover {
    background: var(--color-vivo-admin) !important;
    border-color: var(--color-vivo-admin) !important;
}

.boton-secundario,
.boton-accion,
.boton-editar,
.boton-cancelar {
    background: transparent !important;
    border-color: var(--borde-admin) !important;
    color: var(--texto-secundario-admin) !important;
}

.boton-secundario:hover,
.boton-accion:hover,
.boton-editar:hover,
.boton-cancelar:hover {
    background: var(--admin-dorado-hover) !important;
    border-color: var(--color-vivo-admin) !important;
    color: var(--color-vivo-admin) !important;
}

/* Alertas */
.mensaje-error,
.alerta-error,
.error,
.mensaje {
    background: var(--admin-error-fondo) !important;
    border-color: var(--admin-error-borde) !important;
    color: var(--color-error-texto-admin) !important;
}

.mensaje-exito,
.alerta-exito,
.exito {
    background: var(--admin-exito-fondo) !important;
    border-color: var(--admin-exito-borde) !important;
    color: var(--color-exito-texto-admin) !important;
}

/* Barra y navegación */
.barra-superior,
.menu-lateral {
    background: var(--fondo-panel-admin) !important;
    color: var(--texto-principal-admin) !important;
    border-color: var(--borde-admin) !important;
}

.menu-item {
    color: var(--texto-secundario-admin) !important;
}

.menu-item:hover,
.menu-item.activo,
.menu-item.active {
    color: var(--color-vivo-admin) !important;
    background: var(--admin-dorado-hover) !important;
    border-color: var(--color-vivo-admin) !important;
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-admin) var(--fondo-principal-admin);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--fondo-principal-admin);
}

*::-webkit-scrollbar-thumb {
    background: var(--borde-admin);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-dorado-admin);
}

/* Responsive */
@media (max-width: 700px) {
    .admin-pagina {
        padding: 22px !important;
    }

    .formulario {
        padding: 22px !important;
    }
}


/* =========================================================
   ESTRUCTURA COMÚN DEL ADMINISTRADOR
   ========================================================= */

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fondo-principal-admin) !important;
    color: var(--texto-principal-admin) !important;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 14px;
    line-height: 1.5;
}

.admin-pagina {
    width: min(100%, var(--admin-ancho-contenido));
    margin: 0 auto;
    padding: 34px 35px 60px;
}

.admin-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}

.admin-cabecera > div {
    min-width: 0;
}

.admin-cabecera h1 {
    margin: 7px 0 8px;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.admin-cabecera p {
    margin: 0;
    max-width: 760px;
    color: var(--texto-secundario-admin);
    font-size: 14px;
}

.admin-miga {
    display: inline-block;
    color: var(--color-vivo-admin) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contenido-admin {
    width: 100%;
}

.panel-admin {
    width: 100%;
    padding: 28px;
    background: var(--fondo-panel-admin) !important;
    border: 1px solid var(--borde-admin);
    border-radius: var(--admin-radio-panel);
    box-shadow: var(--sombra-suave-admin);
}

.panel-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    padding: 0 0 22px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--borde-admin) !important;
    border-radius: 0 !important;
}

.panel-cabecera h2 {
    margin: 6px 0 0;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 21px;
    font-weight: 650;
    line-height: 1.25;
}

.panel-etiqueta {
    color: var(--color-vivo-admin) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.formulario {
    width: 100%;
}

.fila-formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

.formulario .campo {
    min-width: 0;
}

.formulario .campo > label {
    font-family: var(--fuente-principal-admin) !important;
    font-size: 12px;
    font-weight: 600;
}

.formulario .campo > input,
.formulario .campo > select,
.formulario .campo > textarea {
    font-family: var(--fuente-principal-admin) !important;
    font-size: 13px;
}

.formulario .acciones-formulario {
    padding-top: 4px;
    border-top: 1px solid var(--borde-admin);
}

@media (max-width: 800px) {
    .admin-pagina {
        padding: 24px 20px 45px;
    }

    .admin-cabecera {
        flex-direction: column;
        margin-bottom: 24px;
    }

    .panel-admin {
        padding: 22px;
    }

    .fila-formulario {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 520px) {
    .admin-pagina {
        padding: 18px 14px 35px;
    }

    .panel-admin {
        padding: 18px;
    }

    .admin-cabecera h1 {
        font-size: 25px;
    }

    .panel-cabecera {
        flex-direction: column;
    }
}

.texto-ayuda-panel {
    margin: 7px 0 0;
    color: var(--texto-secundario-admin);
    font-size: 12px;
}

/* Componentes visuales: navegación por funciones independientes */
.componentes-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.componente-card {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-height:120px;
    padding:22px;
    color:var(--texto-principal-admin)!important;
    text-decoration:none;
    background:var(--fondo-panel-admin)!important;
    border:1px solid var(--borde-admin);
    border-radius:var(--admin-radio-panel);
    transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.componente-card:hover {
    border-color:var(--color-vivo-admin);
    background:var(--fondo-panel-hover-admin)!important;
    transform:translateY(-1px);
}
.componente-card strong { font-size:16px; font-weight:650; }
.componente-card span:last-child { color:var(--texto-secundario-admin); font-size:12px; line-height:1.55; }
.componente-card__etiqueta { color:var(--color-vivo-admin)!important; font-size:10px!important; font-weight:700; letter-spacing:.08em; }
@media(max-width:760px){.componentes-grid{grid-template-columns:1fr;}}

.bloque-configuracion {
    margin-top: 8px;
    padding-top: 4px;
}
.bloque-titulo {
    margin: 0 0 16px;
    color: var(--color-vivo-admin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   BOTONES ADMINISTRATIVOS — NORMALIZACIÓN GLOBAL
   Una sola regla visual para todo el panel.
   ========================================================= */

.boton-principal,
.boton-secundario,
.boton-accion,
.boton-editar,
.boton-cancelar,
.boton-eliminar,
.boton-guardar,
.boton-agregar,
button.boton-principal,
button.boton-secundario,
button.boton-accion,
button.boton-editar,
button.boton-cancelar,
button.boton-eliminar,
button.boton-guardar,
button.boton-agregar,
a.boton-principal,
a.boton-secundario,
a.boton-accion,
a.boton-editar,
a.boton-cancelar,
a.boton-eliminar,
a.boton-guardar,
a.boton-agregar {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 7px !important;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .12s ease !important;
}

.boton-principal,
.boton-guardar,
.boton-agregar {
    min-width: 96px !important;
}

.boton-secundario,
.boton-cancelar {
    min-width: 82px !important;
}

.boton-accion,
.boton-editar,
.boton-eliminar {
    min-width: 76px !important;
}

.boton-principal:active,
.boton-secundario:active,
.boton-accion:active,
.boton-editar:active,
.boton-eliminar:active,
.boton-guardar:active,
.boton-agregar:active,
.boton-cancelar:active {
    transform: translateY(1px) !important;
}

/* Botones que usan solo la clase .boton */
.boton {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 7px !important;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Iconos dentro de botones: no alteran la altura del botón */
.boton-principal svg,
.boton-secundario svg,
.boton-accion svg,
.boton-editar svg,
.boton-eliminar svg,
.boton-guardar svg,
.boton-agregar svg,
.boton-cancelar svg,
.boton img,
.boton-principal img,
.boton-secundario img,
.boton-accion img,
.boton-editar img,
.boton-eliminar img,
.boton-guardar img,
.boton-agregar img,
.boton-cancelar img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    flex: 0 0 16px !important;
}

/* Contenedores de acciones */
.acciones,
.acciones-formulario,
.acciones-tabla,
.formulario-acciones {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.acciones > *,
.acciones-formulario > *,
.acciones-tabla > *,
.formulario-acciones > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.panel-separado { margin-top: 20px; }
.acciones-finales { margin-top: 20px; }


/* =========================================================
   NORMALIZACIÓN GLOBAL DE FORMULARIOS DEL ADMINISTRADOR
   Todos los formularios usan la misma base visual.
   Las páginas pueden conservar sus clases específicas.
   ========================================================= */

.admin-pagina form:not(.formulario-eliminar) {
    width: 100%;
    box-sizing: border-box;
}

.admin-pagina form:not(.formulario-eliminar) label {
    display: block;
    margin: 0 0 8px;
    color: var(--texto-principal-admin) !important;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.admin-pagina form:not(.formulario-eliminar) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-pagina form:not(.formulario-eliminar) select,
.admin-pagina form:not(.formulario-eliminar) textarea {
    box-sizing: border-box !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    margin: 0;
    padding: 10px 13px;
    background: var(--fondo-principal-admin) !important;
    border: 1px solid var(--borde-admin) !important;
    border-radius: 7px !important;
    color: var(--texto-principal-admin) !important;
    font-family: var(--fuente-principal-admin) !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.admin-pagina form:not(.formulario-eliminar) textarea {
    min-height: 120px;
    resize: vertical;
}

.admin-pagina form:not(.formulario-eliminar) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.admin-pagina form:not(.formulario-eliminar) select:focus,
.admin-pagina form:not(.formulario-eliminar) textarea:focus {
    border-color: var(--color-vivo-admin) !important;
    box-shadow: 0 0 0 2px rgb(242 201 76 / 0.10) !important;
}

.admin-pagina form:not(.formulario-eliminar) input::placeholder,
.admin-pagina form:not(.formulario-eliminar) textarea::placeholder {
    color: var(--texto-secundario-admin);
    opacity: .75;
}

.admin-pagina form:not(.formulario-eliminar) option {
    background: var(--fondo-panel-admin);
    color: var(--texto-principal-admin);
}

/* Campos con nombres específicos usados por módulos como Pie,
   Cabecera, Menú, Redes Sociales, etc. */
.admin-pagina .campo-pie,
.admin-pagina .campo-menu,
.admin-pagina .campo-cabecera,
.admin-pagina .campo-superior,
.admin-pagina .campo-componente,
.admin-pagina .campo-formulario,
.admin-pagina .campo {
    width: 100%;
    margin: 0 0 20px;
}

.admin-pagina .campo-pie > label,
.admin-pagina .campo-menu > label,
.admin-pagina .campo-cabecera > label,
.admin-pagina .campo-superior > label,
.admin-pagina .campo-componente > label,
.admin-pagina .campo-formulario > label,
.admin-pagina .campo > label {
    display: block;
    width: 100%;
    margin: 0 0 8px;
}

.admin-pagina .campo-pie input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-pie select,
.admin-pagina .campo-pie textarea,
.admin-pagina .campo-menu input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-menu select,
.admin-pagina .campo-menu textarea,
.admin-pagina .campo-cabecera input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-cabecera select,
.admin-pagina .campo-cabecera textarea,
.admin-pagina .campo-superior input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-superior select,
.admin-pagina .campo-superior textarea,
.admin-pagina .campo-componente input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-componente select,
.admin-pagina .campo-componente textarea,
.admin-pagina .campo-formulario input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo-formulario select,
.admin-pagina .campo-formulario textarea,
.admin-pagina .campo input:not([type="checkbox"]):not([type="radio"]),
.admin-pagina .campo select,
.admin-pagina .campo textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    box-sizing: border-box !important;
}

.admin-pagina .campo-pie textarea,
.admin-pagina .campo-menu textarea,
.admin-pagina .campo-cabecera textarea,
.admin-pagina .campo-superior textarea,
.admin-pagina .campo-componente textarea,
.admin-pagina .campo-formulario textarea,
.admin-pagina .campo textarea {
    min-height: 120px;
}

.admin-pagina input[type="checkbox"],
.admin-pagina input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 7px 0 0;
    padding: 0;
    accent-color: var(--color-vivo-admin);
    vertical-align: middle;
}

.admin-pagina form:not(.formulario-eliminar) > label:has(input[type="checkbox"]),
.admin-pagina .campo-pie:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    margin: 4px 0 20px;
}

.admin-pagina .formulario-acciones,
.admin-pagina .acciones-formulario,
.admin-pagina .acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--borde-admin);
}

.admin-pagina .formulario-panel {
    width: 100%;
    background: var(--fondo-panel-admin) !important;
    border: 1px solid var(--borde-admin);
    border-radius: var(--admin-radio-panel);
    box-shadow: var(--sombra-suave-admin);
    overflow: hidden;
}

.admin-pagina .formulario-panel > form {
    padding: 28px;
}

.admin-pagina .formulario-panel .mensaje-error {
    margin: 0 28px 20px;
}

@media (max-width: 700px) {
    .admin-pagina .formulario-panel > form {
        padding: 20px;
    }

    .admin-pagina .formulario-acciones,
    .admin-pagina .acciones-formulario {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}