/* ============================================================
   Tu Lugar — Sistema de diseño compartido
   ============================================================
   Paleta pensada en los dos países que conecta la plataforma:
   celeste (Argentina, mercado principal) como color dominante,
   verde (Brasil) como acento secundario. Se usa en todas las
   pantallas públicas (index, inicio, planes, etc.) y es la base
   para llevar la misma identidad al panel de propietarios/admin
   en una fase siguiente.
   ============================================================ */

:root {
    /* Color — dos países, una plataforma */
    --tl-celeste: #4FA8D8;       /* Argentina — color dominante */
    --tl-celeste-oscuro: #1D6FA5;
    --tl-celeste-claro: #EAF5FC;
    --tl-verde: #2FA84F;         /* Brasil — acento secundario */
    --tl-verde-oscuro: #1F7A38;
    --tl-verde-claro: #EAF8EE;
    --tl-tinta: #16324A;         /* texto principal — azul noche, no negro puro */
    --tl-tinta-suave: #4A6478;
    --tl-fondo: #F6FAFD;         /* fondo general, apenas celeste */
    --tl-borde: #DCE9F2;

    /* Tipografía */
    --tl-font-display: 'Poppins', sans-serif;
    --tl-font-texto: 'Inter', sans-serif;
}

body {
    font-family: var(--tl-font-texto);
    color: var(--tl-tinta);
    background: var(--tl-fondo);
}

h1, h2, h3, h4, h5, h6, .tl-display {
    font-family: var(--tl-font-display);
    color: var(--tl-tinta);
}

/* Botones de marca — reemplazan al azul/verde default de Bootstrap por
   los tonos propios, sin perder la semántica (primary = acción
   principal, success = confirmar/WhatsApp). */
.btn-primary {
    background: var(--tl-celeste-oscuro);
    border-color: var(--tl-celeste-oscuro);
}
.btn-primary:hover, .btn-primary:focus {
    background: #175a87;
    border-color: #175a87;
}
.btn-outline-primary {
    color: var(--tl-celeste-oscuro);
    border-color: var(--tl-celeste-oscuro);
}
.btn-outline-primary:hover {
    background: var(--tl-celeste-oscuro);
    border-color: var(--tl-celeste-oscuro);
}
.btn-success {
    background: var(--tl-verde-oscuro);
    border-color: var(--tl-verde-oscuro);
}
.btn-success:hover, .btn-success:focus {
    background: #185c29;
    border-color: #185c29;
}

.text-primary { color: var(--tl-celeste-oscuro) !important; }
.text-success { color: var(--tl-verde-oscuro) !important; }

/* Tarjetas — borde sutil de color en vez de la sombra gris genérica de
   siempre, para que cada tarjeta se sienta parte de esta identidad y no
   de un kit de componentes cualquiera. */
.tl-card {
    background: #fff;
    border: 1px solid var(--tl-borde);
    border-radius: 16px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .6rem 1.4rem rgba(22, 50, 74, .08);
    border-color: var(--tl-celeste);
}

/* Insignia de país — mismo lenguaje visual en cualquier pantalla que
   necesite marcar "esto es de Argentina" / "esto es de Brasil". */
.tl-badge-pais {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600; padding: .25rem .6rem;
    border-radius: 999px;
}
.tl-badge-pais.ar { background: var(--tl-celeste-claro); color: var(--tl-celeste-oscuro); }
.tl-badge-pais.br { background: var(--tl-verde-claro); color: var(--tl-verde-oscuro); }

/* Banderas — se usan como iconos de la librería flag-icons (cargada por
   CDN donde haga falta), nunca como emoji: en Windows/algunas fuentes el
   emoji de bandera se ve como "AR"/"BR" en vez de la banderita. */
.tl-bandera { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Cabecera simple (degradé celeste→verde) para pantallas públicas que
   necesitan un título de sección pero no un buscador grande (planes, red
   de vouchers, alta de propietarios...). El hero con buscador de
   inicio.php/index.php es más elaborado y se define en cada uno. */
.tl-header-simple {
    background: linear-gradient(120deg, var(--tl-celeste-oscuro), var(--tl-verde-oscuro));
    padding: 44px 20px;
    text-align: center;
    color: #fff;
}
.tl-header-simple h1 {
    font-family: var(--tl-font-display);
    font-weight: 800;
    font-size: 2rem;
    color: #fff;
    margin-bottom: .35rem;
}
.tl-header-simple p {
    color: rgba(255,255,255,.85);
    margin: 0;
}
@media (max-width: 575.98px) {
    .tl-header-simple { padding: 32px 16px; }
    .tl-header-simple h1 { font-size: 1.5rem; }
}