/* =========================================================
   ProfeParticular — Sistema de diseño
   Educativo, moderno, mobile-first.
   ========================================================= */

:root {
    /* Color */
    --color-primario: #1C2E4A;      /* azul tinta: headers, nav, textos fuertes */
    --color-primario-suave: #2A3F63;
    --color-fondo: #FAF8F5;          /* blanco cálido */
    --color-superficie: #FFFFFF;
    --color-borde: #E5E1D8;
    --color-borde-fuerte: #D8D3C9;
    --color-acento: #E85D25;         /* naranja: única acción principal por pantalla */
    --color-acento-hover: #CF5220;
    --color-exito-fondo: #EAF3E4;
    --color-exito-texto: #2F5E42;
    --color-alerta-fondo: #FBF0DA;
    --color-alerta-texto: #8A5A0B;
    --color-peligro-fondo: #FBEAF0;
    --color-peligro-texto: #993556;
    --color-peligro-borde: #D64545;
    --color-neutro-fondo: #F1EFE8;
    --color-neutro-texto: #5F5E5A;
    --color-texto: #3A3F47;
    --color-texto-secundario: #6B7280;
    --color-texto-muted: #9A968C;

    /* Tipografía */
    --fuente-titulos: 'Lora', Georgia, serif;
    --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --radio-card: 14px;
    --radio-control: 10px;
    --radio-pill: 20px;
    --espacio-xs: 4px;
    --espacio-sm: 8px;
    --espacio-md: 16px;
    --espacio-lg: 24px;
    --altura-nav-inferior: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-cuerpo);
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 16px;
    line-height: 1.5;
    padding-bottom: calc(var(--altura-nav-inferior) + var(--espacio-md));
}

h1, h2, h3 {
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
    font-weight: 600;
    margin: 0 0 var(--espacio-sm);
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

a { color: var(--color-primario); }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radio-control);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primario { background: var(--color-acento); color: #fff; }
.btn-primario:hover { background: var(--color-acento-hover); }

.btn-secundario { background: var(--color-primario); color: #fff; }

.btn-outline {
    background: var(--color-superficie);
    color: var(--color-primario);
    border: 1px solid var(--color-borde-fuerte);
}

.btn-exito { background: #4C8B6E; color: #fff; }

.btn-peligro {
    background: var(--color-superficie);
    color: var(--color-peligro-borde);
    border: 1px solid var(--color-peligro-borde);
}

/* ---------- Tarjetas ---------- */
.card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-card);
    padding: var(--espacio-md);
    margin-bottom: var(--espacio-sm);
}

/* ---------- Chips de estado ---------- */
.chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--radio-pill);
}

.chip-confirmada     { background: var(--color-exito-fondo); color: var(--color-exito-texto); }
.chip-pendiente      { background: var(--color-peligro-fondo); color: var(--color-peligro-texto); }
.chip-comprobante    { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); }
.chip-realizada      { background: var(--color-neutro-fondo); color: var(--color-neutro-texto); }
.chip-cancelada      { background: var(--color-neutro-fondo); color: var(--color-neutro-texto); }

/* ---------- Formularios ---------- */
.campo {
    width: 100%;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-control);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-texto);
    margin-bottom: var(--espacio-sm);
}

.campo:focus {
    outline: none;
    border-color: var(--color-primario);
}

/* ---------- Navegación inferior (mobile) ---------- */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--altura-nav-inferior);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-inferior a {
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-inferior a.activo { color: var(--color-acento); }

/* ---------- Utilidades ---------- */
.contenedor {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--espacio-md);
}

.texto-secundario { color: var(--color-texto-secundario); font-size: 13px; }
.texto-muted { color: var(--color-texto-muted); font-size: 12px; }