/* ------------------------------------------------------------------
   Sistemas GLI 2027 — hoja de estilo base
   Paleta del Manual de Identidad Visual:
   azul #424274 · naranja #F89E32 · grafito #373435
   ------------------------------------------------------------------ */

:root {
    --azul: #424274;
    --azul-oscuro: #33335c;
    --azul-claro: #5c5c96;
    --naranja: #F89E32;
    --naranja-oscuro: #dd8619;
    --grafito: #373435;
    --gris: #6b6a6c;
    --gris-claro: #e8e8ee;
    --fondo: #f4f4f8;
    --blanco: #ffffff;
    --rojo: #c0392b;
    --verde: #27795b;
    --radio: 10px;
    --sombra: 0 2px 14px rgba(55, 52, 53, .10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--grafito);
    background: var(--fondo);
    font-size: 15px;
    line-height: 1.5;
}

h1 { font-size: 1.55rem; margin: 0 0 .2rem; color: var(--azul); }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; color: var(--azul); }

/* ---------------- Login ---------------- */

.cuerpo-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 55%, var(--grafito) 100%);
}

.contenedor-login { width: 100%; max-width: 420px; }

.tarjeta-login {
    background: var(--blanco);
    border-radius: 14px;
    padding: 34px 32px 28px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    border-top: 5px solid var(--naranja);
}

.login-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gris-claro);
}

.logo-gli {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: var(--azul);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.32rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 4px solid var(--naranja);
}

.logo-texto { display: flex; flex-direction: column; }
.logo-texto strong { font-size: .88rem; color: var(--azul); line-height: 1.25; }
.logo-texto span { font-size: .72rem; color: var(--gris); margin-top: 3px; }

.login-ayuda { margin: 0 0 20px; color: var(--gris); font-size: .88rem; }

.campo { margin-bottom: 16px; display: flex; flex-direction: column; }

.campo label,
.campo-checkbox span { font-size: .8rem; font-weight: bold; color: var(--grafito); margin-bottom: 6px; }

.campo input {
    font-family: inherit;
    font-size: .95rem;
    padding: 11px 13px;
    border: 1.5px solid var(--gris-claro);
    border-radius: var(--radio);
    background: #fbfbfd;
    transition: border-color .15s, box-shadow .15s;
}

.campo input:focus {
    outline: none;
    border-color: var(--azul-claro);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(92, 92, 150, .15);
}

.ayuda-campo { font-size: .74rem; color: var(--gris); margin-top: 5px; }
.error-campo { font-size: .78rem; color: var(--rojo); margin-top: 5px; }

.campo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    cursor: pointer;
}
.campo-checkbox input { width: 15px; height: 15px; accent-color: var(--azul); }
.campo-checkbox span { margin: 0; font-weight: normal; color: var(--gris); font-size: .84rem; }

.boton-principal {
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    font-weight: bold;
    color: var(--blanco);
    background: var(--naranja);
    border: none;
    border-radius: var(--radio);
    padding: 12px;
    cursor: pointer;
    transition: background .15s, transform .08s;
}
.boton-principal:hover { background: var(--naranja-oscuro); }
.boton-principal:active { transform: translateY(1px); }

.login-nota { margin: 18px 0 0; font-size: .78rem; color: var(--gris); text-align: center; }
.login-pie { margin-top: 20px; color: rgba(255, 255, 255, .55); font-size: .74rem; text-align: center; }

.alerta {
    border-radius: var(--radio);
    padding: 11px 13px;
    font-size: .85rem;
    margin-bottom: 18px;
    border-left: 4px solid;
}
.alerta-error { background: #fdeceb; color: #8e2c21; border-color: var(--rojo); }
.alerta-ok { background: #eaf5f0; color: #1d5a43; border-color: var(--verde); }
/* 2026-10-15 -- faltaban estos dos nombres; se usan en el catalogo de navieras. */
.alerta-exito { background: #eaf5f0; color: #1d5a43; border-color: var(--verde); }
.alerta-aviso { background: #fdf3e2; color: #7a4b00; border-color: #e0a526; }
.alerta-info { background: #eef2fb; color: #2f3192; border-color: #2f3192; }

/* ---------------- Aplicación ---------------- */

.cuerpo-app { display: flex; flex-direction: column; min-height: 100vh; }

.barra {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--azul);
    color: var(--blanco);
    padding: 0 26px;
    height: 62px;
    border-bottom: 3px solid var(--naranja);
}

.barra-marca { display: flex; align-items: baseline; gap: 9px; }
.marca-gli { font-size: 1.3rem; font-weight: bold; letter-spacing: 1px; }
.marca-sub { font-size: .74rem; color: rgba(255, 255, 255, .7); }

.barra-nav { display: flex; gap: 6px; flex: 1; }
.barra-nav a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .88rem;
    padding: 8px 14px;
    border-radius: var(--radio);
}
.barra-nav a:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.barra-nav a.activo { background: rgba(255, 255, 255, .18); color: var(--blanco); font-weight: bold; }

.barra-sesion { display: flex; align-items: center; gap: 14px; }
.sesion-datos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.sesion-datos strong { font-size: .84rem; }
.sesion-datos span { font-size: .72rem; color: var(--naranja); }

.boton-salir {
    font-family: inherit;
    font-size: .8rem;
    color: var(--blanco);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: var(--radio);
    padding: 7px 14px;
    cursor: pointer;
}
.boton-salir:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanco); }

/* 2026-09-22 -- "ocupa todo el ancho": sin tope, igual que en gli-menu.css. */
.contenedor { flex: 1; width: 100%; max-width: none; margin: 0 auto; padding: 28px 22px 40px; }

.encabezado-pagina { margin-bottom: 22px; }
.subtitulo { margin: 0; color: var(--gris); font-size: .88rem; }

.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.tarjeta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 20px;
    box-shadow: var(--sombra);
    border-left: 4px solid var(--naranja);
    text-decoration: none;
    color: inherit;
}
.tarjeta:hover { box-shadow: 0 4px 20px rgba(55, 52, 53, .16); }
.tarjeta-quieta { border-left-color: var(--azul-claro); }
.tarjeta-numero { font-size: 1.7rem; font-weight: bold; color: var(--azul); }
.tarjeta-titulo { font-size: .86rem; color: var(--grafito); }
.tarjeta-pie { font-size: .74rem; color: var(--gris); margin-top: 6px; }

.panel {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra);
}
.panel-angosto { max-width: 460px; margin: 10px auto; }

.lista-pendientes { margin: 0; padding-left: 20px; color: var(--gris); font-size: .88rem; }
.lista-pendientes li { margin-bottom: 6px; }

.tabla-envoltura { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla thead th {
    text-align: left;
    background: #eeeef4;
    color: var(--azul);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 12px 14px;
    white-space: nowrap;
}
.tabla tbody td { padding: 12px 14px; border-top: 1px solid var(--gris-claro); vertical-align: top; }
.tabla tbody tr:hover { background: #fafaff; }
.tabla code { font-family: "Consolas", monospace; background: #eeeef4; padding: 2px 6px; border-radius: 4px; font-size: .82rem; }
.tabla .correo { display: block; font-size: .76rem; color: var(--gris); }
.fila-super { background: #fff8ef; }
.fila-super:hover { background: #fff2e2; }

.etiqueta {
    display: inline-block;
    font-size: .7rem;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.etiqueta-superadmin { background: var(--naranja); color: var(--blanco); }
.etiqueta-admin { background: var(--azul); color: var(--blanco); }
.etiqueta-usuario { background: var(--gris-claro); color: var(--grafito); }

.estado { font-size: .78rem; white-space: nowrap; }
.estado-alta { color: var(--verde); }
.estado-baja { color: var(--gris); }
.estado-bloqueado { color: var(--rojo); }
.estado-pendiente { color: var(--naranja-oscuro); }

.nota { font-size: .8rem; color: var(--gris); margin-top: 14px; }

.pie { text-align: center; font-size: .74rem; color: var(--gris); padding: 18px; }

@media (max-width: 720px) {
    .barra { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
    .barra-nav { order: 3; flex-basis: 100%; }
    .contenedor { padding: 20px 14px 32px; }
}

/* ---------------------------------------------------------------
   El logo de verdad, no las letras dibujadas a mano que habia antes.
   Dos versiones porque el logo lleva tinta oscura: la de color va
   sobre la tarjeta blanca y la blanca sobre el menu oscuro.
   --------------------------------------------------------------- */

.logo-img {
    display: block;
    width: 100%;
    max-width: 290px;
    height: auto;
}

/* ---------------------------------------------------------------
   2026-11-11 -- Ruben: "Cuando se entre, se deben de ver dos etiquetas
   grandes. Una es pagina web y la otra es sistemas GLI. Primero va
   sistemas GLI y despues la segunda etiqueta es pagina web."
   --------------------------------------------------------------- */
.entrada-etiquetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 980px;
}
.etiqueta-grande {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 34px 30px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    text-decoration: none;
    color: var(--blanco);
    transition: transform .12s ease, box-shadow .12s ease;
}
.etiqueta-grande:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(55, 52, 53, .22); }
.etiqueta-sistemas { background: var(--azul); }
.etiqueta-web { background: var(--naranja-oscuro); }
.etiqueta-titulo { font-size: 2rem; font-weight: bold; line-height: 1.1; }
.etiqueta-texto { font-size: .95rem; opacity: .92; }
.etiqueta-pie { font-size: .85rem; font-weight: bold; margin-top: 8px; }
@media (max-width: 600px) {
    .etiqueta-grande { min-height: 160px; padding: 26px 22px; }
    .etiqueta-titulo { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------
   2026-11-11 -- Ruben: "en las etiquetas de sistemas GLI, página web, no debe haber un menú. Nada más
   debe ser el menú del usuario." Marco sin menú lateral: logo a la izquierda, menú del usuario a la derecha.
   --------------------------------------------------------------- */
.entrada-marco { min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); }
.entrada-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--blanco); border-bottom: 1px solid var(--gris-claro);
    padding: 10px 24px; position: sticky; top: 0; z-index: 5;
}
.entrada-logo img { display: block; height: 44px; width: auto; }
.entrada-contenido { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; }
.menu-usuario { position: relative; }
.menu-usuario summary {
    list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 6px 10px; border-radius: var(--radio); color: var(--grafito); font-size: .9rem;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover, .menu-usuario[open] summary { background: var(--fondo); }
.menu-usuario .avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--azul); color: var(--blanco); font-size: .8rem; font-weight: bold;
}
.menu-usuario-lista {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px;
    background: var(--blanco); border-radius: var(--radio); box-shadow: 0 8px 26px rgba(55, 52, 53, .18);
    padding: 8px 0; display: flex; flex-direction: column;
}
.menu-usuario-rol { padding: 6px 16px 10px; font-size: .75rem; color: var(--gris); border-bottom: 1px solid var(--gris-claro); margin-bottom: 4px; }
.menu-usuario-lista a, .menu-usuario-lista button {
    display: block; text-align: left; padding: 10px 16px; font-size: .9rem; color: var(--grafito);
    text-decoration: none; background: none; border: 0; width: 100%; cursor: pointer; font-family: inherit;
}
.menu-usuario-lista a:hover, .menu-usuario-lista button:hover { background: var(--fondo); color: var(--azul); }
.menu-usuario-lista form { margin: 0; border-top: 1px solid var(--gris-claro); margin-top: 4px; }
.enlace-volver { margin-left: 14px; font-size: .88rem; color: var(--azul); }
@media (max-width: 600px) {
    .entrada-barra { padding: 8px 14px; }
    .entrada-logo img { height: 36px; }
    .menu-usuario-nombre { display: none; }
}

/* 2026-11-11 -- Ruben: "otra donde diga documentos recibidos por el cliente", "etiqueta debe ser de cotizaciones" y
   "La última etiqueta debe decir salud del sistema". Cinco etiquetas: la rejilla se abre a más columnas. */
.entrada-etiquetas { max-width: 1200px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.etiqueta-grande { position: relative; }
.etiqueta-documentos { background: #2f6f8f; }
.etiqueta-cotizaciones { background: #5c5c96; }
.etiqueta-salud { background: #373435; }
.etiqueta-burbuja {
    position: absolute; top: 16px; right: 16px; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 17px;
    background: var(--naranja); color: var(--blanco); font-weight: bold; display: grid; place-items: center; font-size: .95rem;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}
.etiqueta-luz { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #9a9aa6; }
.etiqueta-salud-verde .etiqueta-luz { background: #3fd08a; box-shadow: 0 0 10px #3fd08a; }
.etiqueta-salud-ambar .etiqueta-luz { background: #f5b942; box-shadow: 0 0 10px #f5b942; }
.etiqueta-salud-rojo .etiqueta-luz { background: #ff5b4a; box-shadow: 0 0 10px #ff5b4a; }
.etiqueta-salud-rojo { background: #7a2318; }
/* 2026-11-11 -- Ruben: "A las etiquetas pone un icono o emoji que sea bonito, alusivo al tema, que se vea agradable." */
.etiqueta-icono {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; line-height: 1;
    background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); margin-bottom: 6px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    transition: transform .2s ease;
}
.etiqueta-grande:hover .etiqueta-icono { transform: scale(1.08) rotate(-4deg); }
@media (max-width: 600px) { .etiqueta-icono { width: 52px; height: 52px; font-size: 1.7rem; } }
/* 2026-11-11 -- Ruben: "Debe haber otra etiqueta que diga usuarios del sistema". */
.etiqueta-usuarios { background: #27795b; }
.us-saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.us-saltos a { background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 20px; padding: 7px 14px; font-size: .86rem; color: var(--azul); text-decoration: none; }
.us-saltos a:hover { border-color: var(--azul); }
.us-grupo { margin-bottom: 18px; }
.us-grupo h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.us-cuenta { background: var(--fondo); border: 1px solid var(--gris-claro); border-radius: 20px; padding: 2px 10px; font-size: .8rem; color: var(--gris); }
.etiqueta-bot { background: #229ED9; }   /* 2026-11-11 -- azul de Telegram */

/* 2026-11-11 -- Ruben: "utiliza todo el ancho de la página para acomodar las etiquetas". Cuatro columnas a todo el
   ancho (8 etiquetas = 2 renglones parejos); tres en pantallas medianas, dos en tableta, una en celular. */
.entrada-contenido { max-width: none; }
.entrada-etiquetas { max-width: none; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) { .entrada-etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .entrada-etiquetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .entrada-etiquetas { grid-template-columns: 1fr; } }
.etiqueta-facturacion { background: #b8641a; }

/* 2026-11-11 -- pantalla Facturación */
.fact-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .fact-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .fact-numeros { grid-template-columns: 1fr; } }
.fact-caja { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; border-top: 5px solid var(--gris-claro); display: flex; flex-direction: column; gap: 4px; }
.fact-ambar { border-top-color: #e0a526; }
.fact-rojo { border-top-color: var(--rojo); }
.fact-verde { border-top-color: var(--verde); }
.fact-total { font-size: 2.2rem; font-weight: bold; color: var(--azul); text-decoration: none; }
.fact-titulo { font-weight: bold; color: var(--grafito); }
.fact-ayuda { font-size: .8rem; color: var(--gris); }
.fact-partes { display: flex; gap: 14px; margin-top: 8px; font-size: .85rem; }
.fact-partes a { color: var(--azul); text-decoration: none; }

/* 2026-11-11 -- Ruben: "en editar, que suban su foto" y "los botones tanto de eliminar como de editar". */
.avatar { position: relative; overflow: hidden; }
.avatar-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.foto-editar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 16px; }
.foto-grande { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--sombra); flex-shrink: 0; }
.foto-vacia { display: grid; place-items: center; background: var(--azul); color: var(--blanco); font-size: 1.8rem; font-weight: bold; }
.us-persona { display: flex; align-items: center; gap: 10px; }
.us-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.us-iniciales { display: grid; place-items: center; background: var(--azul); color: var(--blanco); font-size: .78rem; font-weight: bold; }
.us-acciones { white-space: nowrap; }
.us-boton { display: inline-block; border: 1px solid var(--gris-claro); background: var(--blanco); border-radius: 8px; padding: 5px 10px;
            font-size: .82rem; color: var(--azul); text-decoration: none; cursor: pointer; font-family: inherit; margin-left: 4px; }
.us-boton:hover { border-color: var(--azul); }
.us-boton-rojo { color: var(--rojo); }
.us-boton-rojo:hover { border-color: var(--rojo); background: #fdeceb; }
/* 2026-11-11 -- Ruben: "debe haber un log donde venga todos los detalles de todo lo que se está haciendo". */
.etiqueta-log { background: #4a3f6b; }
.log-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.log-filtros .campo { margin: 0; }
.log-texto { flex: 1; min-width: 220px; }
.log-tabla td { vertical-align: top; font-size: .82rem; }
.log-detalle { max-width: 520px; word-break: break-word; }
.log-falla td { background: #fdf3f2; }
/* 2026-11-11 -- con el Log son 9 etiquetas: tres columnas a todo el ancho (cuadrícula pareja de 3 x 3). */
.entrada-etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .entrada-etiquetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .entrada-etiquetas { grid-template-columns: 1fr; } }
/* 2026-11-11 -- Ruben: "su liga donde dice vincular Telegram o desvincular Telegram. O vincular WhatsApp o desvincular WhatsApp." */
.vinculos { margin-top: 22px; }
.vinculos h2 { margin: 0 0 10px; font-size: 1.05rem; }
.vinculos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vinculo { border: 1px solid var(--gris-claro); border-left: 4px solid var(--gris-claro); border-radius: var(--radio); padding: 14px; background: var(--blanco); }
.vinculo-si { border-left-color: var(--verde); }
.vinculo-cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vinculo-cabeza .chip { margin-left: auto; }
.vinculo-icono { font-size: 1.2rem; }
.vinculo-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.vinculo-botones form { margin: 0; }
.vinculo-numero { width: 140px; }
.vinculo-quitar { color: var(--rojo); }
.vinculo-liga { width: 100%; font-size: .8rem; margin: 4px 0 6px; }

/* 2026-11-11 -- Ruben: "Las etiquetas de la portada más chicas, por favor. Sistemas, página web, documentos recibidos,
   facturación, cotizaciones, pon las etiquetas más chicas." Menos alto, menos relleno y letra más chica; siguen a
   todo el ancho en tres columnas. */
.entrada-etiquetas { gap: 14px; }
.etiqueta-grande { min-height: 0; padding: 16px 18px; gap: 4px; justify-content: flex-start; }
.etiqueta-titulo { font-size: 1.25rem; }
.etiqueta-texto { font-size: .8rem; line-height: 1.35; }
.etiqueta-pie { font-size: .76rem; margin-top: 4px; }
.etiqueta-icono { width: 40px; height: 40px; font-size: 1.3rem; margin-bottom: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.etiqueta-burbuja { top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; font-size: .8rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
@media (max-width: 600px) {
    .etiqueta-grande { min-height: 0; padding: 14px 16px; }
    .etiqueta-titulo { font-size: 1.15rem; }
    .etiqueta-icono { width: 36px; height: 36px; font-size: 1.15rem; }
}

/* 2026-11-11 -- Ruben: "mete 4 o 5 en cada renglon". Cinco por renglón en pantalla ancha, cuatro en mediana,
   tres en laptop chica, dos en tableta y una en celular. */
.entrada-etiquetas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .entrada-etiquetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .entrada-etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .entrada-etiquetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .entrada-etiquetas { grid-template-columns: 1fr; } }