/* css/estilos.css - Adaptado para Caribbean Saona */

@import url('https://fonts.googleapis.com/css2?family=ABeeZee&family=Roboto:wght@400;500;700&display=swap');

:root {
    --color-fondo: #FFFFFF;      /* Pure White */
    --color-texto: #111B19;      /* Obsidian Black */
    --color-primario: #F19018;   /* Carrot Orange */
    --color-secundario: #17BEE8; /* Capri Blue */
    --color-borde: #e0e0e0;      
    --radio-esquina: 8px;        
    --fuente-principal: 'ABeeZee', sans-serif; 
    --fuente-secundaria: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* === TIPOGRAFÍA === */
h1, h2, h3, h4 {
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--color-texto);
    font-family: var(--fuente-secundaria);
}

/* === ELEMENTOS DE INTERFAZ (Botones e Inputs) === */
.input-base, .btn-base {
    font-family: var(--fuente-principal);
    font-size: 15px;
    padding: 12px 18px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-esquina);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    outline: none;
    transition: all 0.3s ease; 
}

.input-base {
    width: 100%;
    margin-bottom: 15px;
}

.input-base:focus {
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 2px rgba(23, 190, 232, 0.2);
}

.input-base:hover {
    border-color: var(--color-primario);
}

/* Botón principal */
.btn-primario {
    cursor: pointer;
    background-color: var(--color-primario);
    color: var(--color-fondo);
    border: none;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    border-radius: var(--radio-esquina);
    padding: 12px 24px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primario:hover {
    background-color: #d17b12;
    transform: translateY(-2px);
}

/* Botón secundario */
.btn-secundario {
    cursor: pointer;
    background-color: var(--color-fondo);
    color: var(--color-secundario);
    border: 2px solid var(--color-secundario);
    font-weight: bold;
    display: inline-block;
    text-align: center;
    border-radius: var(--radio-esquina);
    padding: 10px 22px;
    transition: all 0.3s ease;
}

.btn-secundario:hover {
    background-color: var(--color-secundario);
    color: var(--color-fondo);
}

/* === ESTRUCTURAS DE DATOS (Tarjetas / Paneles) === */
.panel {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-esquina);
    padding: 25px;
    background-color: var(--color-fondo);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: var(--color-secundario);
}