/* ===== Pagina: botones.css ===== */
:root {
    --btn-bg: #005BFF; /* azul brillante */
    --btn-bg-hover: #0047cc;
    --btn-text: #ffffff;
    --btn-border: #00D4FF; /* celeste brillante */
    --btn-disabled: #9aa0a6;
    --blanco: #fff;
    --negro: #000;
    --celeste-brillante: #00D4FF;
    --azul-brillante: #005BFF;
    }


.btn-mega {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-text);
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

    .btn-mega:hover {
        background: var(--btn-bg-hover);
    }

    .btn-mega:active {
        transform: translateY(1px);
    }

    .btn-mega:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(0, 212, 255, .25), 0 6px 16px rgba(0,0,0,.12);
    }

    .btn-mega[disabled],
    .btn-mega:disabled {
        background: var(--btn-disabled);
        border-color: #c7c9cc;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .85;
    }

/* ===== 5 tamaños por ancho fijo en centímetros =====
   1cm, 2cm, 3cm, 4cm, 5cm
   (alto consistente; podés ajustarlo) */
.btn-w-1cm {
    width: 1cm;
    padding: .45rem .2rem;
    font-size: .80rem;
}

.btn-w-2cm {
    width: 2cm;
    padding: .45rem .35rem;
    font-size: .85rem;
}

.btn-w-3cm {
    width: 3cm;
    padding: .50rem .50rem;
    font-size: .90rem;
}

.btn-w-4cm {
    width: 4cm;
    padding: .55rem .65rem;
    font-size: .95rem;
}

.btn-w-5cm {
    width: 5cm;
    padding: .60rem .75rem;
    font-size: 1.00rem;
}

/* Opcional si querés 6 cm (descomentá)
.btn-w-6cm{ width: 6cm;  padding: .65rem .85rem; font-size: 1.05rem; }
*/

/* ===== Opcionales útiles ===== */
.btn-block {
    width: 100%;
}

.btn-outline {
    background: transparent;
    color: var(--btn-bg);
    border-color: var(--btn-bg);
    box-shadow: none;
}

    .btn-outline:hover {
        background: rgba(0, 91, 255, .10);
    }









/* ===== Botones para MENU(tamaño fijo en 6cm ancho por 3.71 alto) ===== */

/* ===== Botones con imagen: 6cm x 3.71cm ===== */
.menu-grid {
    width: 100%;
}

.menu-tile {
    width: 6cm !important;
    height: 3.71cm !important;
    position: relative;
    overflow: hidden;
    display: block; /* importante para que el <a> respete tamaño */
    border-radius: 16px;
    border: 2px solid var(--celeste-brillante);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    text-decoration: none;
    background: #fff;
}

    .menu-tile:hover {
        border-color: var(--azul-brillante);
        box-shadow: 0 14px 28px rgba(0,0,0,.14);
    }

    /* La imagen queda forzada al tamaño del tile */
    .menu-tile img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover; /* recorta para llenar el botón */
    }

/* Título dentro del mismo botón, sin cambiar tamaño */
.menu-tile-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .35rem .5rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    letter-spacing: .2px;
}