@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Base tipográfica 18px; con "letra extra grande" sube a 22px */
    html {
        font-size: 112.5%;
    }

    html.letra-grande {
        font-size: 137.5%;
    }

    body {
        @apply bg-fondo font-sans text-slate-900 antialiased;
        line-height: 1.5;
        font-feature-settings: 'cv11', 'ss01';
    }

    h1 {
        @apply font-extrabold tracking-tight;
        font-size: max(28px, 1.55rem);
        line-height: 1.15;
    }

    h2 {
        @apply font-bold tracking-tight;
        font-size: max(21px, 1.17rem);
        line-height: 1.25;
    }

    /* Foco muy visible para teclado y lectores de pantalla */
    :focus-visible {
        outline: 3px solid #10b981;
        outline-offset: 3px;
    }
}

@layer components {
    .btn {
        @apply inline-flex w-full items-center justify-center gap-2.5 rounded-2xl px-6 py-3 text-center font-semibold transition duration-150 active:scale-[0.98] disabled:opacity-40;
        min-height: max(60px, 3.35rem);
        font-size: max(19px, 1.06rem);
    }

    .btn-primario {
        @apply btn bg-green-600 text-white shadow-lg shadow-green-600/25 hover:bg-green-700;
    }

    .btn-secundario {
        @apply btn bg-white text-slate-900 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50;
    }

    .btn-peligro {
        @apply btn bg-white text-red-600 ring-1 ring-red-200 hover:bg-red-50;
    }

    .campo {
        @apply block w-full rounded-2xl border border-slate-300 bg-white px-4 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-green-600 focus:ring-4 focus:ring-green-100;
        min-height: max(56px, 3.1rem);
        font-size: max(18px, 1rem);
    }

    .etiqueta {
        @apply block font-semibold text-slate-800;
        font-size: max(18px, 1rem);
    }

    .tarjeta {
        @apply rounded-3xl bg-white p-5 shadow-suave;
    }

    /* Texto pequeño en mayúsculas sobre los títulos de tarjeta */
    .sobretitulo {
        @apply text-sm font-semibold uppercase tracking-wider text-slate-500;
    }

    .valor-grande {
        @apply font-extrabold leading-none tracking-tight text-slate-900;
        font-size: max(34px, 1.9rem);
    }

    .icono-caja {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-green-50 text-green-700;
    }

    .enlace {
        @apply font-semibold text-green-700 underline-offset-4 hover:underline;
    }

    .aviso-ok {
        @apply rounded-2xl bg-green-50 p-4 font-medium text-green-900 ring-1 ring-green-200;
    }

    .aviso-alerta {
        @apply rounded-2xl bg-amber-50 p-4 font-medium text-amber-900 ring-1 ring-amber-200;
    }

    .aviso-error {
        @apply rounded-2xl bg-red-50 p-4 font-medium text-red-800 ring-1 ring-red-200;
    }

    .barra {
        @apply h-3 w-full overflow-hidden rounded-full bg-slate-100;
    }

    .barra-relleno {
        @apply h-full rounded-full bg-gradient-to-r from-green-500 to-teal-500;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-700;
    }
}