/* Pantalla de competidores: una ficha por rival, para leerlos de un vistazo.
   Usa las variables de color de medtracker.css y el prefijo rv- para no chocar con nada. */

.rv {
    --rv-noche: #131c4d;
    --rv-ok: #1b7a3e;
    --rv-ok-suave: #e6f4ea;
    --rv-aviso: #b26a00;
    --rv-aviso-suave: #fff4e0;
    --rv-peligro: #b3261e;
    --rv-peligro-suave: #fdecea;
}

/* --- Cabecera ------------------------------------------------------------- */

.rv-heroe {
    position: relative;
    padding: 34px 36px 30px;
    margin-bottom: 22px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(820px 380px at 92% -20%, rgba(17, 191, 196, .5), transparent 60%),
        linear-gradient(125deg, var(--rv-noche) 0%, var(--marino) 52%, #0a6f86 100%);
    overflow: hidden;
}

.rv-antetitulo {
    margin: 0 0 6px;
    font: 500 .78rem var(--fuente);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.rv-heroe h1 {
    margin: 0 0 8px;
    font: 600 clamp(1.9rem, 3.4vw, 2.7rem)/1.08 var(--fuente-titulo);
    color: #fff;
}

.rv-heroe h1 em { font-style: normal; color: #7be7ea; }

.rv-heroe p { max-width: 74ch; margin: 0; color: rgba(255, 255, 255, .86); font-size: 1.02rem; }

.rv-pulso {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.rv-pulso li {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
}

.rv-pulso strong { display: block; font: 600 2.1rem/1 var(--fuente-titulo); color: #fff; white-space: nowrap; }
.rv-pulso span { display: block; margin-top: 6px; font-size: .86rem; line-height: 1.3; color: rgba(255, 255, 255, .8); }
.rv-pulso .rv-pulso-alerta strong { color: #ffd27a; }

/* --- Secciones -------------------------------------------------------------- */

.rv-seccion { margin: 34px 0 0; }

.rv-seccion > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.rv-seccion > header h2 { margin: 0; font: 600 1.55rem/1.15 var(--fuente-titulo); color: var(--marino); }
.rv-seccion > header p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.rv-seccion > header .rv-cuenta {
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca-hover);
    font: 600 .85rem var(--fuente);
}

.rv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

/* --- Ficha de rival --------------------------------------------------------- */

.rv-ficha {
    --tono: var(--tinta-tenue);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px 18px;
    border-radius: 22px;
    background: var(--fondo);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra);
    transition: box-shadow .18s ease, transform .18s ease;
}

.rv-ficha::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 22px 0 0 22px;
    background: var(--tono);
}

.rv-ficha:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.rv-ficha[data-nivel="alto"] { --tono: var(--rv-peligro); }
.rv-ficha[data-nivel="medio"] { --tono: var(--aviso-linea); }
.rv-ficha[data-nivel="bajo"] { --tono: var(--linea); }
.rv-ficha[data-nivel="bajo"] { background: #fbfcfd; }

.rv-ficha-cabecera { display: flex; align-items: flex-start; gap: 12px; }

.rv-puesto {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--panel);
    color: var(--tinta-suave);
    font: 600 .95rem var(--fuente-titulo);
}

.rv-ficha[data-nivel="alto"] .rv-puesto { background: var(--rv-peligro-suave); color: var(--rv-peligro); }
.rv-ficha[data-nivel="medio"] .rv-puesto { background: var(--rv-aviso-suave); color: var(--rv-aviso); }

.rv-ficha h3 { margin: 0; font: 600 1.12rem/1.25 var(--fuente); color: var(--tinta); overflow-wrap: anywhere; }
.rv-ficha h3 small { display: block; margin-top: 2px; font: 400 .84rem var(--fuente); color: var(--tinta-suave); }

.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.rv-chip {
    display: inline-block;
    padding: .16rem .62rem;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--linea);
    color: var(--tinta-suave);
    font-size: .76rem;
    white-space: nowrap;
}

.rv-chip-ok { background: var(--rv-ok-suave); border-color: #bfe3cb; color: var(--rv-ok); }
.rv-chip-aviso { background: var(--rv-aviso-suave); border-color: #f6d59a; color: var(--rv-aviso); }
.rv-chip-peligro { background: var(--rv-peligro-suave); border-color: #f3b5b0; color: var(--rv-peligro); }
.rv-chip-marca { background: var(--marca-suave); border-color: #b9e9eb; color: var(--marca-hover); }

/* Cifras clave de la ficha: tres celdas iguales. */
.rv-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }

.rv-cifras div { padding: 10px 12px; border-radius: 14px; background: var(--panel); min-width: 0; }
.rv-cifras dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); }
.rv-cifras dd { margin: 3px 0 0; font: 600 1.32rem/1.1 var(--fuente-titulo); color: var(--marino); white-space: nowrap; }
.rv-cifras dd small { font: 400 .76rem var(--fuente); color: var(--tinta-suave); }
.rv-cifras .rv-mas-barato dd { color: var(--rv-peligro); }
.rv-cifras .rv-mas-caro dd { color: var(--rv-ok); }
.rv-cifras .rv-sin-dato dd { font: 400 .86rem/1.25 var(--fuente); color: var(--tinta-tenue); white-space: normal; }

/* Barra de presencia: lo que vende frente a lo que solo tiene autorizado. */
.rv-barra { height: 8px; border-radius: 999px; background: var(--linea-suave); overflow: hidden; }
.rv-barra i { display: block; height: 100%; width: var(--ancho, 0%); border-radius: 999px; background: var(--tono); }
.rv-barra-leyenda { margin: 6px 0 0; font-size: .8rem; color: var(--tinta-suave); }

.rv-movimientos { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.rv-movimientos li { display: grid; grid-template-columns: 4.4ch minmax(0, 1fr); gap: 10px; font-size: .86rem; line-height: 1.35; }
.rv-movimientos time { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-movimientos strong { font-weight: 500; color: var(--tinta); }
.rv-movimientos small { display: block; color: var(--tinta-suave); overflow-wrap: anywhere; }
.rv-movimientos .rv-oportunidad strong { color: var(--rv-ok); }

.rv-etiqueta-bloque {
    margin: 0 0 6px;
    font: 500 .7rem var(--fuente);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.rv-quieto { margin: 0; font-size: .86rem; color: var(--tinta-tenue); }

.rv-detalle { margin-top: auto; border-top: 1px solid var(--linea-suave); padding-top: 10px; }
.rv-detalle > summary { cursor: pointer; font-size: .86rem; color: var(--marca-hover); }

.rv-detalle ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.rv-detalle li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .84rem; color: var(--tinta); }
.rv-detalle li.rv-latente { color: var(--tinta-tenue); }
.rv-detalle li span { color: var(--tinta-suave); font-size: .78rem; white-space: nowrap; }

/* Lo que no entra entre los principales. */
.rv-resto { margin-top: 18px; }
.rv-resto > summary { cursor: pointer; color: var(--marca-hover); font-size: .95rem; }
.rv-resto .rv-rejilla { margin-top: 16px; }

.rv-vacio {
    padding: 26px 28px;
    border-radius: 22px;
    background: var(--panel);
    border: 1px dashed var(--linea);
    color: var(--tinta-suave);
}

.rv-vacio strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--tinta); }

.rv-nota { margin: 14px 0 0; font-size: .84rem; color: var(--tinta-tenue); }

.rv-busqueda { margin-top: 40px; }
.rv-busqueda > summary { cursor: pointer; font: 600 1.05rem var(--fuente); color: var(--marino); }

@media (max-width: 900px) {
    .rv-pulso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rv-heroe { padding: 26px 22px 22px; }
}

@media (max-width: 520px) {
    .rv-rejilla { grid-template-columns: 1fr; }
    .rv-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Enlaces de accion en las cabeceras de seccion ----------------------------- */

.rv-enlace {
    display: inline-block;
    margin-left: 8px;
    padding: .12rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--linea);
    color: var(--marca-hover);
    font-size: .84rem;
    text-decoration: none;
}

.rv-enlace:hover { background: var(--marca-suave); border-color: var(--marca-fuerte); }
.rv-enlace-activo { background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: #fff; }
.rv-enlace-activo:hover { background: var(--marca-hover); color: #fff; }

/* --- Cartera: una fila por producto ------------------------------------------------ */

.ct-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 22px; background: var(--fondo); box-shadow: var(--sombra); }

.ct-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ct-tabla th, .ct-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); text-align: left; vertical-align: middle; }
.ct-tabla thead th { font: 500 .72rem var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); background: var(--panel); white-space: nowrap; }
.ct-tabla tbody tr:last-child th, .ct-tabla tbody tr:last-child td { border-bottom: 0; }
.ct-tabla tbody tr:hover { background: #fafbfc; }
.ct-tabla tbody th { font-weight: 400; min-width: 190px; }
.ct-tabla tbody th a { font: 600 1rem var(--fuente); color: var(--marino); text-decoration: none; }
.ct-tabla tbody th a:hover { color: var(--marca-fuerte); text-decoration: underline; }
.ct-tabla tbody th small { display: block; color: var(--tinta-suave); font-size: .8rem; }
.ct-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-num strong { font: 600 1.15rem var(--fuente-titulo); color: var(--marino); }
.ct-num small { color: var(--tinta-tenue); }
.ct-sin { color: var(--tinta-tenue); font-size: .84rem; }
.ct-alerta { color: var(--rv-peligro); font-weight: 600; }
.ct-ok { color: var(--rv-ok); font-weight: 600; }
.ct-cambio { display: inline-block; margin-left: 6px; padding: 0 .4rem; border-radius: 999px; font-size: .74rem; }
.ct-sube { background: var(--rv-peligro-suave); color: var(--rv-peligro); }
.ct-baja { background: var(--rv-ok-suave); color: var(--rv-ok); }
.ct-linea { width: 96px; height: 26px; display: block; }
.ct-linea polyline { fill: none; stroke: var(--marca-fuerte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ct-novedades { display: inline-block; min-width: 2.1em; padding: .1rem .5rem; border-radius: 999px; background: var(--rv-aviso-suave); color: var(--rv-aviso); font-weight: 600; text-align: center; text-decoration: none; }

/* --- Novedades: lista por dias -------------------------------------------------------- */

.nv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.nv-dia h3 { margin: 0 0 8px; font: 500 .8rem var(--fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-tenue); }
.nv-dia > ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 18px; background: var(--fondo); box-shadow: var(--sombra); overflow: hidden; }

.nv-novedad { display: grid; grid-template-columns: 11.5em minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); }
.nv-novedad:last-child { border-bottom: 0; }
.nv-novedad > .rv-chip { justify-self: start; }
.nv-novedad strong { font-weight: 500; color: var(--tinta); }
.nv-novedad small { display: block; color: var(--tinta-suave); font-size: .84rem; overflow-wrap: anywhere; }
.nv-nueva { background: #f4fcfc; box-shadow: inset 4px 0 0 var(--marca); }
.nv-producto { padding: .12rem .7rem; border-radius: 999px; background: var(--panel); color: var(--marino); font-size: .84rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nv-producto:hover { background: var(--marca-suave); }

/* --- De donde sale cada dato ------------------------------------------------------------- */

.cm-fuente { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--linea); font-size: .76rem; line-height: 1.4; color: var(--tinta-tenue); }
.cm-fuente strong { font-weight: 500; color: var(--tinta-suave); }

@media (max-width: 700px) {
    .nv-novedad { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Impresion: la pantalla se guarda como PDF desde el navegador ------------------------ */

@media print {
    header, nav, footer, .menu, .subMenu, .rv-enlace, .rv-busqueda, .rv-detalle > summary, .rv-resto > summary { display: none !important; }
    .rv-resto > .rv-rejilla, .rv-detalle ul { display: grid !important; max-height: none !important; }
    .rv-heroe { color: #000; background: none; border: 1px solid #999; }
    .rv-heroe h1, .rv-heroe p, .rv-pulso strong, .rv-pulso span, .rv-antetitulo { color: #000 !important; }
    .rv-pulso li { border-color: #999; background: none; }
    .rv-ficha, .ct-caja, .nv-dia > ul { box-shadow: none; break-inside: avoid; }
}
.rv-acciones { margin: 18px 0 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-boton { padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); color: #fff; font: 500 .88rem var(--fuente); text-decoration: none; cursor: pointer; }
.rv-boton:hover { background: rgba(255, 255, 255, .24); color: #fff; }
@media print { .rv-acciones { display: none !important; } }

/* --- Suministro: problemas activos, leidos desde el producto -------------- */

.sm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 0; }
.sm-filtros button.rv-enlace { appearance: none; cursor: pointer; font-family: var(--fuente); }
.sm-filtros .rv-enlace b { margin-left: 4px; font-weight: 500; opacity: .7; }

.sm-filtros input[type="search"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: .45rem 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-control);
    font: .92rem var(--fuente);
    color: var(--tinta);
    background: var(--fondo);
}

.sm-filtros input[type="search"]:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca-fuerte); }

.sm-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.sm-ficha[hidden], .sm-bloque[hidden] { display: none; }

/* La lectura es lo primero que hay que ver: lo demas la justifica. */
.sm-lectura {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border-left: 4px solid var(--tono, var(--linea));
    background: var(--panel);
    font: 500 .98rem/1.4 var(--fuente);
    color: var(--tinta);
}

.sm-ficha[data-relacion="propia"] .sm-lectura { background: var(--rv-peligro-suave); }
.sm-ficha[data-relacion="rival"][data-nivel="medio"] .sm-lectura { background: var(--rv-ok-suave); border-left-color: var(--rv-ok); }
.sm-ficha[data-relacion="rival"][data-nivel="medio"] { --tono: var(--rv-ok); }

.sm-tiempo-barra { height: 8px; border-radius: 999px; background: var(--linea-suave); overflow: hidden; }
.sm-tiempo-barra i { display: block; height: 100%; border-radius: 999px; background: var(--marino); }
.sm-tiempo-vencido .sm-tiempo-barra i { background: var(--aviso-linea); }

/* Sin fecha de fin no hay proporcion que ensenar: rayas. */
.sm-tiempo-abierto .sm-tiempo-barra i {
    background: repeating-linear-gradient(135deg, var(--marino) 0 8px, #5d6cab 8px 16px);
}

.sm-tiempo dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.sm-tiempo dt, .sm-datos dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); }
.sm-tiempo dd, .sm-datos dd { margin: 2px 0 0; font-size: .92rem; color: var(--tinta); }
.sm-tiempo dd strong { font: 600 1.15rem var(--fuente-titulo); color: var(--marino); }
.sm-tiempo dd small, .sm-datos dd small { display: block; font-size: .78rem; color: var(--tinta-tenue); }
.sm-tiempo dl div:last-child { text-align: right; }

.sm-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.sm-datos .sm-ancho { grid-column: 1 / -1; }
.sm-datos dd { overflow-wrap: anywhere; }

.sm-ficha .rv-detalle p { margin: 8px 0 0; font-size: .88rem; color: var(--tinta-suave); }

.sm-sin-resultados { margin: 24px 0 0; color: var(--tinta-suave); }

.sm-barra-dias { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.sm-barra-dias i { flex: none; width: max(4px, calc(var(--ancho, 0%) * .7)); height: 8px; border-radius: 999px; background: var(--aviso-linea); }
.sm-barra-dias b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta); }

.sm-nota, .sm-fuente { margin: 14px 0 0; font-size: .84rem; color: var(--tinta-tenue); }
.sm-fuente { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.sm-fuente a { color: var(--marca-hover); }

.ct-tabla tbody th .rv-chip { margin-left: 8px; vertical-align: middle; }

@media (max-width: 520px) {
    .sm-rejilla { grid-template-columns: 1fr; }
}

/* --- Movil y tableta ------------------------------------------------------ */

@media (max-width: 900px) {
    .rv-heroe { border-radius: 22px; }

    /* Botones y enlaces con altura para el dedo. */
    .rv-enlace, .nv-producto, .ct-novedades { min-height: 40px; display: inline-flex; align-items: center; }
    .rv-detalle > summary, .rv-resto > summary, .rv-busqueda > summary { padding-block: 10px; }

    /* Filtros de suministro: los botones se deslizan en una fila y el buscador va debajo. */
    .sm-filtros { flex-wrap: wrap; }
    .sm-filtros input[type="search"] { flex: 1 1 100%; order: 5; }
    .sm-filtros a.rv-enlace { order: 6; }

    .sm-tiempo dl { gap: 6px; }

    /* La cartera y las tablas de suministro pasan a fichas (medtracker.css + tablas.js). */
    .ct-caja { overflow: visible; border-radius: 18px; }
    .ct-tabla.tabla-apilable .tabla-titulo a { font-size: 1.1rem; }
    .ct-tabla.tabla-apilable .ct-num strong { font-size: 1.1rem; }
    .sm-barra-dias { min-width: 0; justify-content: flex-end; }
    .sm-barra-dias i { width: calc(var(--ancho, 0%) * .35); }
}

@media (max-width: 900px) { .ct-novedades { justify-content: center; min-width: 40px; } }

@media (max-width: 520px) {
    .rv-heroe h1 { font-size: 1.75rem; }
    .rv-pulso { gap: 8px; }
    .rv-pulso li { padding: 12px; }
    .rv-pulso strong { font-size: 1.7rem; }
    .rv-boton { min-height: 40px; }
}