/* ════════════════════════════════════════════════════════════════════════════
   header-telefonos.css — Transotel.Web
   Ubicación: wwwroot/css/header-telefonos.css
   LOTE F17 · Desplegable .tel-selector de la cabecera fija

   Se carga desde _Layout.cshtml, así que sale en las doce páginas públicas.
   Prefijo .tel- propio: no pisa .lang-* ni .user-* de site.css, del que solo
   se reutilizan las variables de color.

   NO se toca site.css. Si algún día se unifican, este fichero entero encaja
   detrás de la sección "7. SELECTOR DE IDIOMA".
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales ────────────────────────────────────────────────────── */
:root {
    --tel-panel:      #0d2340;                  /* mismo fondo que .lang-dropdown */
    --tel-borde:      rgba(223, 187, 62, 0.20);
    --tel-oro:        #dfbb3e;
    --tel-oro-a12:    rgba(223, 187, 62, 0.12);
    --tel-oro-a45:    rgba(223, 187, 62, 0.45);
    --tel-blanco-a07: rgba(255, 255, 255, 0.07);
    --tel-blanco-a18: rgba(255, 255, 255, 0.18);
    --tel-blanco-a85: rgba(255, 255, 255, 0.85);
    --tel-blanco-a55: rgba(255, 255, 255, 0.55);
    --tel-wa:         #25d366;
    --tel-wa-a15:     rgba(37, 211, 102, 0.15);
    --tel-teal-a15:   rgba(0, 133, 114, 0.22);
}

/* ── Contenedor ───────────────────────────────────────────────────────────── */
/* margin-left:auto absorbe el hueco libre de .navbar-inner (space-between),
   asi que el boton queda pegado al menu en escritorio y a la hamburguesa en
   movil, sin tocar ni una linea de site.css. */
.tel-selector {
    position:    relative;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Botón ────────────────────────────────────────────────────────────────── */
.tel-toggle {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    min-height:     42px;
    padding:        0.4rem 0.85rem;
    background:     var(--tel-blanco-a07);
    border:         1px solid var(--tel-blanco-a18);
    border-radius:  999px;
    color:          var(--tel-blanco-a85);
    font-size:      0.85rem;
    font-weight:    600;
    letter-spacing: 0.02em;
    cursor:         pointer;
    transition:     background-color 0.2s ease,
                    border-color     0.2s ease,
                    color            0.2s ease;
}

.tel-toggle:hover,
.tel-selector.is-open .tel-toggle {
    background-color: var(--tel-oro-a12);
    border-color:     var(--tel-oro-a45);
    color:            var(--tel-oro);
}

.tel-toggle:focus-visible {
    outline:        2px solid var(--tel-oro-a45);
    outline-offset: 2px;
}

.tel-toggle-chevron {
    transition: transform 0.2s ease;
}
.tel-selector.is-open .tel-toggle-chevron {
    transform: rotate(180deg);
}

/* Móvil: solo el icono. El rótulo y la flecha se van para dejar sitio al
   logo y a la hamburguesa. El aria-label del botón mantiene el nombre. */
.tel-toggle-txt,
.tel-toggle-chevron { display: none; }

@media (min-width: 992px) {
    .tel-toggle-txt,
    .tel-toggle-chevron { display: inline; }
}

@media (max-width: 991.98px) {
    .tel-toggle {
        width:           42px;
        padding:         0;
        justify-content: center;
        font-size:       1rem;
    }
}

/* ── Panel desplegable ────────────────────────────────────────────────────── */
.tel-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 0.6rem);
    right:         0;
    width:         max-content;
    min-width:     250px;
    max-width:     min(320px, calc(100vw - 2rem));
    background:    var(--tel-panel);
    border:        1px solid var(--tel-borde);
    border-radius: 12px;
    box-shadow:    0 10px 28px rgba(0, 0, 0, 0.35);
    overflow:      hidden;
    z-index:       100;
    list-style:    none;
    margin:        0;
    padding:       0.25rem;
}

.tel-selector.is-open .tel-dropdown { display: block; }

/* ── Cada número ──────────────────────────────────────────────────────────── */
.tel-item {
    display:         flex;
    align-items:     center;
    gap:             0.7rem;
    padding:         0.6rem 0.7rem;
    border-radius:   9px;
    text-decoration: none;
    transition:      background-color 0.2s ease;
}

.tel-item:hover,
.tel-item:focus-visible {
    background-color: var(--tel-oro-a12);
    text-decoration:  none;
}

.tel-item:focus-visible {
    outline:        2px solid var(--tel-oro-a45);
    outline-offset: -2px;
}

.tel-ico {
    flex-shrink:     0;
    width:           38px;
    height:          38px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    font-size:       1rem;
    line-height:     1;
}

.tel-ico-fijo {
    background: var(--tel-teal-a15);
    color:      var(--tel-oro);
}

.tel-ico-wa {
    background: var(--tel-wa-a15);
    color:      var(--tel-wa);
    font-size:  1.2rem;
}

.tel-body {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    min-width:      0;
}

.tel-rotulo {
    font-size:      0.66rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--tel-blanco-a55);
}

.tel-numero {
    font-size:     0.95rem;
    font-weight:   700;
    color:         #ffffff;
    word-break:    break-word;
    overflow-wrap: anywhere;
}

.tel-item-wa .tel-numero { color: var(--tel-wa); }

.tel-nota {
    font-size:   0.66rem;
    line-height: 1.3;
    color:       var(--tel-blanco-a55);
}

.tel-nota i { margin-right: 2px; }

/* ── Accesibilidad: sin animación si el usuario la ha desactivado ─────────── */
@media (prefers-reduced-motion: reduce) {
    .tel-toggle,
    .tel-item,
    .tel-toggle-chevron { transition: none; }
    .tel-selector.is-open .tel-toggle-chevron { transform: none; }
}

/* ── Impresión: la cabecera no se imprime ─────────────────────────────────── */
@media print {
    .tel-selector { display: none; }
}