/* Montserrat — tipografía corporativa de La 13 (auto-hospedada; CSP default-src 'self') */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
             src:url('/static/fonts/montserrat-400.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
             src:url('/static/fonts/montserrat-500.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
             src:url('/static/fonts/montserrat-600.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
             src:url('/static/fonts/montserrat-700.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
             src:url('/static/fonts/montserrat-800.ttf') format('truetype'); }

:root { --rojo: #B20F26; --tinta: #1a1a1a; --gris: #6b6b6b;
        --fuente: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { font-family: var(--fuente);
       margin: 0; color: var(--tinta); background: #f5f5f5; }
h1, h2 { font-family: var(--fuente); font-weight: 700; color: var(--rojo); letter-spacing: -.01em; }

/* ── Logo / marca ───────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand .wm { font-family: var(--fuente); font-weight: 800; font-size: 1.4rem;
             letter-spacing: -.01em; color: var(--tinta); line-height: 1; }
.brand .wm .r { color: var(--rojo); }
.brand svg { display: block; flex: none; }

.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; background: #fff;
          padding: .65rem 1rem; border-bottom: 3px solid var(--rojo); }
/* Banner de vista previa (admin "ver como proveedor"): franja superior a todo el ancho */
.topbar .preview-banner { order: -1; flex-basis: 100%; margin: -.65rem -1rem .55rem; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
/* Vistas de administración con tablas densas (p.ej. matriz de Acceso) */
main.admin { max-width: 1100px; }
/* La tabla scrollea horizontalmente DENTRO de la página, no la desborda */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }
.tabla-scroll > table { margin-top: 0; }
body.auth { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.card { background: #fff; padding: 2rem; border-radius: 12px; max-width: 360px;
        width: 100%; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
label { display: block; text-align: left; margin: .8rem 0 .2rem; font-size: .9rem; }
input[type=text], input[type=email] { width: 100%; padding: .6rem; border: 1px solid #ccc;
        border-radius: 8px; font-size: 1rem; }
button { margin-top: 1rem; background: var(--rojo); color: #fff; border: 0;
         padding: .6rem 1.2rem; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.muted { color: var(--gris); font-size: .85rem; }
.info { background: #eef; padding: .6rem; border-radius: 8px; }
.inline { display: inline-flex; gap: .4rem; align-items: center; }
.check { display: flex; gap: .5rem; align-items: center; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid #e2e2e2; }
.card-row { background: #fff; padding: 1rem; border-radius: 10px; margin: .6rem 0;
            display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
#modulo-comercial { background: #fff; padding: 1.5rem; border-radius: 12px;
            border-left: 4px solid var(--rojo); }

/* ── Dashboard comercial ──────────────────────────────────────── */
.saludo { margin: .4rem 0 .2rem; }
.saludo h1 { margin: 0; font-size: 1.5rem; }
.fecha { color: var(--gris); font-size: .85rem; margin: .1rem 0 .4rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1.2rem; }
.chip { padding: .4rem .9rem; border: 1px solid #d8d8d8; border-radius: 999px;
        text-decoration: none; color: #444; font-size: .9rem; background: #fff; }
.chip.on { background: var(--rojo); color: #fff; border-color: var(--rojo); }

.panel { background: #fff; border-radius: 14px; padding: 1.1rem 1.2rem; margin: 1rem 0;
         box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.panel > h2 { margin: 0 0 .8rem; font-size: 1.1rem; display: flex;
              align-items: center; gap: .45rem; }

.reco { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: .8rem 1rem; margin: .55rem 0; border-radius: 10px;
        background: #fafafa; border-left: 5px solid #ccc; }
.reco:last-child { margin-bottom: 0; }
.reco-alta  { border-left-color: var(--rojo); }
.reco-media { border-left-color: #f0a500; }
.reco span { font-size: .95rem; line-height: 1.35; }
.reco a { flex: none; color: var(--rojo); text-decoration: none; font-weight: 600;
          white-space: nowrap; }
.reco a:hover { text-decoration: underline; }

.metricas { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.metrica .n { font-size: 1.7rem; font-weight: 800; font-family: var(--fuente);
              color: var(--tinta); line-height: 1.1; letter-spacing: -.02em; }
.metrica .l { font-size: .78rem; color: var(--gris); }
.semaforo { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
            font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.verde { background: #2e7d32; }
.dot.amarillo { background: #f0a500; }
.dot.rojo { background: var(--rojo); }

.verlink { display: inline-block; margin-top: .8rem; color: var(--rojo);
           font-weight: 600; text-decoration: none; }
.verlink:hover { text-decoration: underline; }
.proximo { color: var(--gris); font-style: italic; margin: 0; }
.volver { display: inline-block; margin-bottom: .6rem; color: var(--rojo);
          text-decoration: none; font-weight: 600; }
.admin-tag { margin-left: auto; font-weight: 600; font-size: .85rem; color: var(--gris);
             text-transform: uppercase; letter-spacing: .06em; }

/* ── Brief + explorador ─────────────────────────────────── */
.panel.brief { border-left: 5px solid var(--rojo); }
.panel.brief p { margin: 0 0 .5rem; font-size: .98rem; line-height: 1.4; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; align-items: center; }
.filtros input[type=search], .filtros select { padding: .45rem .6rem; border: 1px solid #ccc;
        border-radius: 8px; font-size: .9rem; font-family: var(--fuente); background: #fff; }
.filtros input[type=search] { min-width: 220px; }
.barra { display: inline-block; height: 8px; width: var(--p); max-width: 120px;
         background: var(--rojo); border-radius: 4px; margin-right: .5rem; vertical-align: middle;
         min-width: 2px; }
.adminnav { display: flex; gap: 1rem; margin-left: 1.2rem; }
.adminnav a { color: var(--rojo); text-decoration: none; font-weight: 600; font-size: .9rem; }
.adminnav a:hover { text-decoration: underline; }

/* Menú de navegación del proveedor: barra de pestañas a todo el ancho, segunda fila
   del topbar (más protagonista que el menú pequeño que iba a la derecha del logo). */
.provnav { order: 3; flex-basis: 100%; width: 100%; display: flex; align-items: center;
           flex-wrap: wrap; gap: .25rem; margin-top: .55rem; padding-top: .5rem;
           border-top: 1px solid #eee; }
.provtab { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.02rem;
           padding: .6rem .95rem; border-radius: 8px 8px 0 0;
           border-bottom: 3px solid transparent; transition: background .12s, color .12s; }
.provtab:hover { text-decoration: none; background: #faf0f1; color: var(--rojo); }
.provtab.on { color: var(--rojo); background: #faf0f1; border-bottom-color: var(--rojo); }
.provtab.logout { margin-left: auto; color: var(--gris); font-weight: 500; font-size: .92rem;
                  border-bottom-color: transparent; }
.provtab.logout:hover { color: var(--rojo); background: transparent; }
.error { color: #b00; background: #fde8e8; padding: .5rem .7rem; border-radius: 8px; }
.badge { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; }
.badge-aprobado { background: #e6f4ea; color: #1e7e34; }
.badge-bloqueado { background: #fde8e8; color: #b00; }
button.danger { background: #fff; color: #b00; border: 1px solid #b00; }
.adminlink { position: fixed; right: 12px; bottom: 10px; color: var(--gris);
             font-size: .8rem; text-decoration: none; opacity: .7; }
.adminlink:hover { opacity: 1; text-decoration: underline; }
.preview-banner{background:#B20F26;color:#fff;padding:.5rem 1rem;text-align:center;font-size:.95rem}
.preview-banner a{color:#fff;text-decoration:underline}
.matriz td.mod,.matriz th.mod{text-align:center}

/* ── Responsive / vista móvil ───────────────────────────── */
@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; gap: .4rem; padding: .55rem .7rem; }
    main { padding: .8rem; }

    /* Tablas (incl. la matriz proveedores × módulos): scroll horizontal propio,
       no rompen el ancho de la página */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Navegaciones: que envuelvan en vez de desbordar */
    .adminnav { margin-left: 0; flex-wrap: wrap; }
    .provnav { gap: .15rem; }
    .provtab { font-size: .95rem; padding: .5rem .7rem; }

    /* Recomendaciones: apilar texto y enlace en pantallas chicas */
    .reco { flex-direction: column; align-items: flex-start; gap: .4rem; }

    /* Buscador/filtros a ancho completo */
    .filtros input[type=search] { min-width: 0; width: 100%; }
    .metricas { gap: 1rem; }
}