/* ============================================================
   estilo.css — Sistema Poseidón sobre Bootstrap 5.3
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --nau-900: #0a2342;
    --nau-700: #1a4a7a;
    --nau-500: #2171b5;
    --nau-300: #6baed6;
    --nau-100: #deebf7;
    --nau-50:  #f0f6fc;
    --dorado:  #c9922a;

    /* Colores viaje mañana (azul marino) */
    --man-bg:     #e8f4fd;
    --man-header: #1a4a7a;
    --man-borde:  #2171b5;
    --man-texto:  #0a2342;
    --man-hover:  #d0e8f8;

    /* Colores viaje tarde (dorado/ámbar) */
    --tar-bg:     #fff8e8;
    --tar-header: #7a4a00;
    --tar-borde:  #c9922a;
    --tar-texto:  #4a2800;
    --tar-hover:  #fef0cc;

    --bs-primary:          #2171b5;
    --bs-primary-rgb:      33, 113, 181;
    --bs-body-font-family: 'Nunito', sans-serif;
    --bs-body-font-size:   1.05rem;
    --bs-body-bg:          var(--nau-50);
}

body { font-size: 1.05rem; background-color: var(--nau-50); }
h1, h2, h3, .display-font { font-family: 'Lora', Georgia, serif; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar-poseidon {
    background: linear-gradient(135deg, var(--nau-900) 0%, var(--nau-700) 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    min-height: 65px;
}
.navbar-poseidon .nav-link {
    color: var(--nau-100) !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: background 0.2s;
}
.navbar-poseidon .nav-link:hover,
.navbar-poseidon .nav-link.active {
    background: rgba(255,255,255,0.15);
    color: #fff !important;
}
.navbar-poseidon .nav-link.salir { color: #ffaaaa !important; }

/* ── Cards ────────────────────────────────────────────────── */
.card-nau {
    border: none;
    border-top: 4px solid var(--nau-500);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(10,35,66,0.10);
}
.card-nau .card-header {
    background: linear-gradient(135deg, var(--nau-900), var(--nau-700));
    color: #fff;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.4rem;
    border-bottom: none;
}
.card-nau .card-header h2,
.card-nau .card-header h3 {
    font-family: 'Lora', serif;
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}

/* ── Card viaje MAÑANA ────────────────────────────────────── */
.card-manana {
    border: none;
    border-top: 5px solid var(--man-borde);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(10,35,66,0.10);
    background: #fff;
}
.card-manana .viaje-header {
    background: linear-gradient(135deg, #0a2342, #1a4a7a);
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.4rem;
    margin-bottom: 0;
}
.card-manana .tabla-viaje thead {
    background-color: var(--man-bg);
}
.card-manana .tabla-viaje thead th {
    color: var(--man-texto);
    font-weight: 800;
    border-bottom: 2px solid var(--man-borde);
}
.card-manana .tabla-viaje tbody td { color: #1a1a2e; }
.card-manana .tabla-viaje tbody tr:hover td { background-color: var(--man-hover); }
.card-manana .numero-cupo { color: var(--man-borde); }

/* ── Card viaje TARDE ─────────────────────────────────────── */
.card-tarde {
    border: none;
    border-top: 5px solid var(--tar-borde);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(74,40,0,0.10);
    background: #fff;
}
.card-tarde .viaje-header {
    background: linear-gradient(135deg, #4a2800, #7a4a00);
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.4rem;
    margin-bottom: 0;
}
.card-tarde .tabla-viaje thead {
    background-color: var(--tar-bg);
}
.card-tarde .tabla-viaje thead th {
    color: var(--tar-texto);
    font-weight: 800;
    border-bottom: 2px solid var(--tar-borde);
}
.card-tarde .tabla-viaje tbody td { color: #1a1a2e; }
.card-tarde .tabla-viaje tbody tr:hover td { background-color: var(--tar-hover); }
.card-tarde .numero-cupo { color: var(--tar-borde); }

/* ── Tabla base ───────────────────────────────────────────── */
.tabla-viaje { width: 100%; border-collapse: collapse; }
.tabla-viaje thead th { padding: 0.9rem 1rem; font-size: 0.95rem; border: none; }
.tabla-viaje tbody td { padding: 0.85rem 1rem; vertical-align: middle; font-size: 1rem; border-bottom: 1px solid #f0f0f0; }
.tabla-viaje tbody tr:last-child td { border-bottom: none; }

/* Tabla usuarios (mantiene estilo oscuro) */
.table thead {
    background: linear-gradient(90deg, var(--nau-900), var(--nau-700));
    color: #fff;
}
.table thead th { font-size: 0.95rem; font-weight: 700; padding: 0.9rem 1rem; border: none; color: #fff; }
.table tbody td { padding: 0.85rem 1rem; vertical-align: middle; font-size: 1rem; }
.table-hover tbody tr:hover { background-color: var(--nau-50); }

.numero-cupo { font-weight: 800; font-size: 1rem; min-width: 28px; display: inline-block; text-align: center; }
.fila-vacia td { background: #fafaf8; color: #bbb; font-style: italic; font-size: 0.9rem; }

/* ── Botones ──────────────────────────────────────────────── */
.btn { font-weight: 700; font-size: 1rem; padding: 0.6rem 1.3rem; border-radius: 10px; }
.btn-lg { font-size: 1.1rem; padding: 0.85rem 1.8rem; }
.btn-primary { background-color: var(--nau-500); border-color: var(--nau-500); }
.btn-primary:hover { background-color: var(--nau-700); border-color: var(--nau-700); }

/* ── Barra cupos ──────────────────────────────────────────── */
.barra-cupos { background: var(--nau-50); border: 1px solid var(--nau-100); border-radius: 10px; padding: 0.7rem 1.1rem; }

/* ── Viaje header ─────────────────────────────────────────── */
.viaje-titulo { font-family: 'Lora', serif; font-size: 1.15rem; margin: 0; color: #fff; }
.viaje-subtitulo { font-size: 0.88rem; color: rgba(255,255,255,0.7); margin: 0; }

/* ── Calendario ───────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dia-nombre { text-align: center; font-weight: 800; font-size: 0.8rem; color: #888; padding: 0.35rem 0; text-transform: uppercase; letter-spacing: 0.06em; }
.cal-dia {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--nau-900);
    background: #fff;
    border: 2px solid transparent;
    transition: all 0.15s;
    min-height: 52px;
}
.cal-dia:hover { background: var(--nau-100); border-color: var(--nau-300); color: var(--nau-900); transform: scale(1.06); }
.cal-dia.hoy { background: var(--nau-500); color: #fff; border-color: var(--nau-700); }
.cal-dia.vacio { background: transparent; cursor: default; pointer-events: none; }
.cal-puntos { display: flex; gap: 3px; margin-top: 3px; }
.cal-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--nau-300); }
.cal-dia.hoy .cal-punto { background: #ffd166; }

/* ── Login ────────────────────────────────────────────────── */
.login-bg {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--nau-900) 0%, var(--nau-700) 60%, var(--nau-500) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login-card { border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); border: none; max-width: 460px; width: 100%; }

/* ── Detalle ──────────────────────────────────────────────── */
.detalle-campo { background: var(--nau-50); border: 1px solid var(--nau-100); border-radius: 10px; padding: 0.9rem 1.2rem; }
.detalle-etiqueta { font-size: 0.78rem; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.2rem; }
.detalle-valor { font-size: 1.1rem; font-weight: 700; color: var(--nau-900); }

/* ── Formularios ──────────────────────────────────────────── */
.form-control, .form-select { font-size: 1.05rem; padding: 0.7rem 1rem; border-radius: 10px; border: 2px solid #cde; }
.form-control:focus, .form-select:focus { border-color: var(--nau-500); box-shadow: 0 0 0 3px rgba(33,113,181,0.18); }
label.form-label { font-weight: 700; font-size: 1rem; color: #3a4a5c; }
.info-viaje { background: var(--nau-50); border: 1px solid var(--nau-100); border-radius: 10px; padding: 1rem 1.2rem; }

/* ── Flash ────────────────────────────────────────────────── */
.alerta-flash { border-left: 5px solid; border-radius: 10px; font-weight: 600; font-size: 1rem; animation: entrar 0.3s ease; }
@keyframes entrar { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ── Pie ──────────────────────────────────────────────────── */
.pie { text-align: center; padding: 2rem 1rem; color: #999; font-size: 0.85rem; border-top: 1px solid #e0e8f0; margin-top: 3rem; }

@media (max-width: 576px) {
    body { font-size: 1rem; }
    .cal-dia { min-height: 40px; font-size: 0.9rem; }
    .btn { font-size: 0.95rem; }
}