/* ============================================================================
   Identidad institucional
   ----------------------------------------------------------------------------
   Los colores se declaran una sola vez, aquí arriba, y todo el resto de la hoja
   los usa por su nombre. Eso permite ajustar la paleta sin ir a buscar códigos
   hexadecimales repartidos por el archivo, y obliga a que un color nuevo pase
   primero por esta lista, donde se nota si en realidad ya existía uno parecido.
   ========================================================================== */

:root {
    --azul-primario:   #0e5d97;  /* Headers, títulos, enlaces */
    --azul-secundario: #1c85b2;  /* Gradientes, acentos */
    --azul-acento:     #1424f5;  /* Detalles especiales */
    --naranja:         #ffa400;  /* Botones principales */
    --amarillo:        #e5b536;  /* Hover, acentos cálidos */
    --rojo:            #c64132;  /* Alertas */
    --verde:           #1c6b3f;  /* Disponible, entregado, todo en orden */
    --ambar-texto:     #8a6100;  /* Texto legible sobre los tonos cálidos */
    --gris-claro:      #ecedef;  /* Fondos suaves */
    --blanco:          #ffffff;  /* Fondos principales */

    /* Lavados de los tres anteriores. Son los mismos tonos con casi toda la
       saturación quitada: sirven de fondo a una fila de aviso sin competir con
       el texto. No son colores nuevos, son estos mismos muy diluidos. */
    --azul-lavado:     #eef5fa;
    --azul-borde:      #cfe2ef;
    --rojo-lavado:     #fdf6f5;
    --naranja-lavado:  #fffaf1;
    --amarillo-lavado: #fffdf6;

    --texto:          #2b3445;
    --texto-suave:    #6b7686;
    --borde:          #dcdfe4;

    --sombra:      0 1px 3px rgba(14, 93, 151, .10), 0 1px 2px rgba(14, 93, 151, .06);
    --sombra-alta: 0 8px 24px rgba(14, 93, 151, .14);

    --radio: .5rem;
    --menu-ancho: 250px;
}

/* ---------- Base ---------- */

body {
    margin: 0;
    background: var(--gris-claro);
    color: var(--texto);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .95rem;
}

a {
    color: var(--azul-primario);
    text-decoration: none;
}

a:hover {
    color: var(--azul-secundario);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--azul-primario);
    font-weight: 600;
}

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

.cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: linear-gradient(90deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
    color: var(--blanco);
    box-shadow: var(--sombra);
}

.cabecera .marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--blanco);
    font-size: 1.05rem;
    font-weight: 600;
}

.cabecera .marca img {
    height: 36px;
    width: auto;
}

.cabecera .marca:hover {
    color: var(--blanco);
    text-decoration: none;
}

.cabecera .usuario {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

.cabecera .usuario .rol {
    padding: .15rem .5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .18);
    font-size: .75rem;
}

.cabecera .btn-menu {
    display: none;
    background: none;
    border: 0;
    color: var(--blanco);
    font-size: 1.4rem;
}

/* ---------- Menú lateral ---------- */

.menu-lateral {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    width: var(--menu-ancho);
    z-index: 1020;
    padding: 1rem .75rem;
    overflow-y: auto;
    background: var(--blanco);
    border-right: 1px solid var(--borde);
}

.menu-lateral .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .25rem;
    padding: .65rem .85rem;
    border-radius: var(--radio);
    color: var(--texto);
    font-weight: 500;
    transition: background .15s, color .15s;
}

.menu-lateral .nav-link i {
    font-size: 1.15rem;
    color: var(--azul-secundario);
}

.menu-lateral .nav-link:hover {
    background: var(--gris-claro);
    color: var(--azul-primario);
    text-decoration: none;
}

.menu-lateral .nav-link.activo {
    background: var(--azul-primario);
    color: var(--blanco);
}

.menu-lateral .nav-link.activo i {
    color: var(--naranja);
}

/* ---------- Contenido ---------- */

.contenido {
    margin-top: 60px;
    margin-left: var(--menu-ancho);
    min-height: calc(100vh - 60px);
    padding: 1.5rem;
}

.titulo-pagina {
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--borde);
}

.titulo-pagina h1 {
    margin: 0;
    font-size: 1.5rem;
}

.titulo-pagina .breadcrumb {
    margin: .25rem 0 0;
    padding: 0;
    background: none;
    font-size: .825rem;
}

/* ---------- Tarjetas ---------- */

.card {
    margin-bottom: 1.25rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra);
}

.card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--azul-primario);
    font-weight: 600;
}

/* Tarjeta de indicador: la franja de color a la izquierda distingue de un
   vistazo a qué corresponde cada número sin depender de leer el rótulo. */
.tarjeta-dato {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem;
    border-left: 4px solid var(--azul-primario);
}

.tarjeta-dato .icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--gris-claro);
    color: var(--azul-primario);
    font-size: 1.4rem;
}

.tarjeta-dato .valor {
    margin: 0;
    color: var(--azul-primario);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
}

.tarjeta-dato .rotulo {
    margin: .2rem 0 0;
    color: var(--texto-suave);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.tarjeta-dato.acento-naranja  { border-left-color: var(--naranja); }
.tarjeta-dato.acento-naranja  .icono { color: var(--naranja); }
.tarjeta-dato.acento-amarillo { border-left-color: var(--amarillo); }
.tarjeta-dato.acento-amarillo .icono { color: var(--amarillo); }
.tarjeta-dato.acento-rojo     { border-left-color: var(--rojo); }
.tarjeta-dato.acento-rojo     .icono { color: var(--rojo); }
.tarjeta-dato.acento-verde    { border-left-color: var(--verde); }
.tarjeta-dato.acento-verde    .icono { color: var(--verde); }

/* ---------- Avisos de Inicio ----------
   Una fila por cosa que espera algo, ordenadas por urgencia. Repiten a
   propósito el lenguaje de .tarjeta-dato —borde izquierdo de color sobre fondo
   claro— para que se lean como parte del mismo tablero y no como un cartel
   pegado encima. */

.lista-avisos {
    display: flex;
    flex-direction: column;
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borde);
    border-left: 4px solid transparent;
}

.aviso:last-child { border-bottom: none; }

.aviso .icono { font-size: 1rem; line-height: 1.45; }
.aviso .texto { flex: 1; min-width: 0; }
.aviso .titulo { margin: 0; font-weight: 600; font-size: .92rem; }
.aviso .detalle { margin: .1rem 0 0; font-size: .85rem; color: var(--texto-suave); }

.aviso .accion {
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.aviso.grave { border-left-color: var(--rojo);     background: var(--rojo-lavado); }
.aviso.grave .icono { color: var(--rojo); }

.aviso.medio { border-left-color: var(--naranja);  background: var(--naranja-lavado); }
.aviso.medio .icono { color: var(--ambar-texto); }

.aviso.leve  { border-left-color: var(--amarillo); background: var(--amarillo-lavado); }
.aviso.leve  .icono { color: var(--ambar-texto); }

/* ---------- Botones ---------- */

.btn-institucional {
    border: 0;
    background: var(--naranja);
    color: #4a2d00;
    font-weight: 600;
}

.btn-institucional:hover {
    background: var(--amarillo);
    color: #4a2d00;
}

.btn-institucional-azul {
    border: 0;
    background: var(--azul-primario);
    color: var(--blanco);
    font-weight: 600;
}

.btn-institucional-azul:hover {
    background: var(--azul-secundario);
    color: var(--blanco);
}

/* ---------- Tablas ---------- */

.table thead th {
    background: var(--azul-primario);
    border-color: var(--azul-primario);
    color: var(--blanco);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.table tbody tr:hover {
    background: var(--gris-claro);
}

/* ---------- Estados ---------- */

.etiqueta-estado {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 600;
}

.etiqueta-estado.activo    { background: #d6f0e0; color: var(--verde); }
.etiqueta-estado.inactivo  { background: var(--gris-claro); color: var(--texto-suave); }
.etiqueta-estado.pendiente { background: #fff0cc; color: var(--ambar-texto); }
.etiqueta-estado.alerta    { background: #f8dbd7; color: #8f2a1e; }

/* ---------- Aviso flotante ---------- */

.aviso-flotante {
    position: fixed;
    top: 75px;
    right: 1rem;
    z-index: 1080;
    max-width: 380px;
}

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

.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
}

.caja-login {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    border-radius: .75rem;
    background: var(--blanco);
    box-shadow: var(--sombra-alta);
}

.caja-login .logo {
    display: block;
    max-width: 160px;
    margin: 0 auto 1.25rem;
}

.caja-login h1 {
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
    text-align: center;
}

/* ---------- Pie ---------- */

.pie {
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: .8rem;
    text-align: center;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 991px) {
    .cabecera .btn-menu { display: block; }

    .menu-lateral {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .menu-lateral.abierto { transform: translateX(0); }

    .contenido {
        margin-left: 0;
        padding: 1rem;
    }
}

/* ============================================================================
   Listado de inventario y formularios por secciones
   ----------------------------------------------------------------------------
   Todo lo de abajo usa la misma paleta de arriba; no se agrego ningun color.
   ========================================================================== */

/* ---------- Fichas de filtro ----------
   Reemplazan al desplegable de estados: con la ficha se ve de una cuantos hay
   de cada estado, que es justo lo que un desplegable esconde. */

.fichas-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ficha-filtro {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    background: var(--blanco);
    color: var(--texto);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.ficha-filtro:hover {
    border-color: var(--azul-secundario);
    color: var(--azul-primario);
    text-decoration: none;
}

.ficha-filtro.activa {
    border-color: var(--azul-primario);
    background: var(--azul-primario);
    color: var(--blanco);
}

.ficha-filtro .cuenta { opacity: .7; font-weight: 500; }

/* ---------- Celda de equipo ----------
   Marca, modelo, tipo y serie se leen como una sola cosa en vez de repartidos
   en cuatro columnas. */

.celda-equipo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.celda-equipo .simbolo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--radio);
    background: var(--gris-claro);
    color: var(--azul-primario);
    font-size: 1.05rem;
}

.etiqueta-tipo {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid var(--borde);
    border-radius: .25rem;
    color: var(--azul-secundario);
    font-size: .72rem;
    font-weight: 600;
}

/* ---------- Tarjetas de equipo (pantallas chicas) ----------
   Una tabla de varias columnas en un telefono obliga a desplazar en
   horizontal, que es donde la gente se pierde. */

.lista-tarjetas { display: none; flex-direction: column; gap: .65rem; }

.tarjeta-equipo {
    padding: .8rem;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra);
}

.tarjeta-equipo.acento-disponible { border-left-color: var(--verde); }
.tarjeta-equipo.acento-prestado   { border-left-color: var(--amarillo); }
.tarjeta-equipo.acento-alerta     { border-left-color: var(--rojo); }
.tarjeta-equipo.acento-inactivo   { border-left-color: var(--texto-suave); }

.tarjeta-equipo .pie-tarjeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--borde);
}

.tarjeta-equipo .dato {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}

/* Los botones de una tarjeta se tocan con el dedo, no con un puntero. */
.tarjeta-equipo .acciones .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

/* ---------- Secciones plegables del formulario ----------
   Los 25 campos del equipo dejan de ser una sola cascada. */

.seccion-campos {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.seccion-campos + .seccion-campos { margin-top: .75rem; }

.seccion-cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem .9rem;
    border: 0;
    background: var(--blanco);
    color: var(--texto);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.seccion-campos.abierta .seccion-cabecera {
    background: var(--gris-claro);
    color: var(--azul-primario);
}

.seccion-cabecera .titulo { flex-grow: 1; }

.seccion-cabecera .resumen {
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 500;
}

.seccion-cabecera .chevron { transition: transform .18s ease; }
.seccion-campos.abierta .seccion-cabecera .chevron { transform: rotate(180deg); }

.seccion-cuerpo { display: none; padding: 1rem .9rem; }
.seccion-campos.abierta .seccion-cuerpo { display: block; }

/* Campo que el sistema completa solo: se muestra resuelto, no como una
   decision mas que tomar. */
.campo-resuelto {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border: 1px dashed var(--borde);
    border-radius: .375rem;
    background: var(--gris-claro);
    font-weight: 600;
}

.campo-resuelto i { color: var(--azul-secundario); }

/* ---------- Pasos (formulario en pantallas chicas) ---------- */

.barra-pasos { display: none; margin-bottom: 1rem; }

.barra-pasos .tramos { display: flex; gap: .4rem; margin-bottom: .6rem; }

.barra-pasos .tramo {
    flex-grow: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--borde);
}

.barra-pasos .tramo.hecho { background: var(--azul-primario); }

.barra-pasos .rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.barra-pasos .rotulo .nombre { color: var(--azul-primario); font-weight: 600; }
.barra-pasos .rotulo .cuenta { color: var(--texto-suave); font-size: .8rem; }

/* ---------- Unidad en cascada ----------
   Un desplegable por nivel del organigrama, en fila mientras quepan. Se elige
   bajando —SUBDIRECCION, después CONVENIOS, después LABORATORIO DENTAL— en vez
   de buscar el nombre suelto entre 35 unidades indentadas, donde no se ve de
   quién depende cada una. */

.cascada-unidad {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.cascada-unidad .nivel-unidad {
    flex: 1 1 200px;
    min-width: 0;
}

.cascada-unidad .nivel-unidad .form-label {
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 500;
}

/* La ruta elegida, escrita completa. Es la comprobación de que se bajó por la
   rama correcta: "INVENTARIO" a secas no dice si cuelga de FINANZAS o de otra
   parte. */
.ruta-unidad {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    margin-top: .6rem;
    padding: .5rem .65rem;
    border: 1px solid var(--azul-borde);
    border-radius: var(--radio);
    background: var(--azul-lavado);
    font-size: .875rem;
}

.ruta-unidad .paso  { color: var(--texto-suave); }
.ruta-unidad .sep   { color: var(--azul-secundario); font-size: .75rem; }
.ruta-unidad .final { color: var(--azul-primario); font-weight: 600; }

.ruta-unidad.vacia {
    border-color: var(--borde);
    background: var(--gris-claro);
    color: var(--texto-suave);
}

/* ---------- Árbol de equipos por unidad ----------
   El organigrama con su recuento al costado. La sangría la pone la vista según
   el nivel de cada unidad, igual que en el desplegable del formulario. */

.arbol-unidades { display: flex; flex-direction: column; }

.rama-unidad {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--borde);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.rama-unidad:hover:not(:disabled) { background: var(--azul-lavado); }
.rama-unidad:disabled { cursor: default; }
.rama-unidad.oculta { display: none; }
.rama-unidad.vacia .nombre { color: var(--texto-suave); }

.rama-unidad .chevron {
    flex: 0 0 1rem;
    font-size: .75rem;
    color: var(--texto-suave);
    transition: transform .15s;
}

.rama-unidad[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.rama-unidad .nombre { flex: 1; min-width: 0; }

/* El recuento propio y el acumulado. El punteado distingue al segundo: no es
   lo que hay en esa oficina, es lo que cuelga de esa jefatura. */
.rama-unidad .cuenta {
    padding: .1rem .5rem;
    border: 1px solid var(--azul-borde);
    border-radius: 999px;
    background: var(--azul-lavado);
    color: var(--azul-primario);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rama-unidad .cuenta.cero {
    border-color: var(--borde);
    background: var(--gris-claro);
    color: var(--texto-suave);
}

.rama-unidad .cuenta.acumulada {
    border-style: dashed;
    background: var(--blanco);
    color: var(--texto-suave);
}

.equipos-unidad {
    display: none;
    padding: .35rem .9rem .6rem 2.5rem;
    background: var(--azul-lavado);
    border-bottom: 1px solid var(--borde);
}

.equipos-unidad.abierta { display: block; }
.equipos-unidad .table { background: none; }
.equipos-unidad .table td { border-color: var(--azul-borde); }

.interruptor-vacias {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 400;
    cursor: pointer;
}

/* ---------- Periféricos conectados a un equipo ----------
   No se editan en la ficha del equipo: salen de los monitores que apuntan a
   él. Se muestran como fichas y no como un desplegable, justamente para que se
   note que son de solo lectura. */

/* En varias columnas mientras quepan: una lista de monitores en una sola
   columna angosta obliga a partir los nombres de modelo en pedazos. */
.lista-conectados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .3rem;
    margin-top: .5rem;
}

.lista-conectados .conectado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--azul-borde);
    border-radius: var(--radio);
    background: var(--blanco);
    font-size: .87rem;
    cursor: pointer;
}

.lista-conectados .conectado {
    position: relative;
    padding-right: 1.9rem;
    background: var(--azul-lavado);
    border-color: var(--azul-borde);
    cursor: default;
}

.lista-conectados .conectado > i { color: var(--azul-primario); flex: 0 0 auto; }
.lista-conectados .conectado .nombre { font-weight: 500; }

/* El boton de soltar: discreto hasta que se apunta, y rojo cuando se apunta,
   porque deshace algo. */
/* Fijo arriba a la derecha: con la serie en su propia linea, un boton que
   fluye termina solo al final de la segunda y se lee como si fuera de ella. */
.lista-conectados .btnQuitarMonitor {
    position: absolute;
    top: .3rem;
    right: .35rem;
    padding: .1rem .25rem;
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

/* La misma ficha sirve para marcar: en "se van con el equipo" lleva casilla
   en vez de boton de quitar, y ahi el hueco de la derecha sobra. */
.lista-conectados label.conectado { cursor: pointer; padding-right: .6rem; }
.lista-conectados label.conectado input { margin: 0; flex: 0 0 auto; }
.lista-conectados label.conectado:has(input:checked) { border-color: var(--azul-primario); }
.lista-conectados label.conectado:has(input:not(:checked)) {
    background: var(--blanco);
    opacity: .7;
}

.lista-conectados .btnQuitarMonitor:hover { color: var(--rojo); }
.lista-conectados .btnQuitarMonitor:focus-visible {
    outline: 2px solid var(--azul-secundario);
    outline-offset: 2px;
}

/* El nombre puede ocupar lo que necesite y la serie baja a la linea siguiente
   si no cabe, en vez de estirar la fila y sacar una barra horizontal. */
.lista-conectados .conectado > span { min-width: 0; overflow-wrap: anywhere; }
.lista-conectados .serie { flex-basis: 100%; padding-left: 1.4rem; }

/* Con muchos monitores la lista no puede empujar el resto del formulario. */
.lista-conectados {
    max-height: 11rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.lista-conectados .serie { color: var(--texto-suave); font-size: .8rem; }
.lista-conectados .ninguno { color: var(--texto-suave); font-size: .87rem; }

/* ---------- Ficha rápida de un equipo ----------
   Una fila que se puede pinchar tiene que parecerlo: el cursor y el fondo al
   pasar por encima son lo único que lo dice, porque no hay botón. */

.fila-con-ficha { cursor: pointer; }
.fila-con-ficha:hover { background: var(--azul-lavado); }

.fila-con-ficha:focus-visible {
    outline: 2px solid var(--azul-secundario);
    outline-offset: -2px;
}

/* Rótulo y dato en dos columnas, con el rótulo angosto: así los valores quedan
   alineados y se leen en vertical de un vistazo. */
.ficha-equipo {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: .35rem .9rem;
    margin: 0 0 1rem;
}

.ficha-equipo dt {
    color: var(--texto-suave);
    font-size: .85rem;
    font-weight: 500;
}

.ficha-equipo dd { margin: 0; font-weight: 500; }

/* El bloque del prestamo dentro de la ficha: amarillo como la etiqueta de
   estado "prestado", para que se reconozca sin leer el rótulo. */
.bloque-prestamo {
    margin-bottom: 1rem;
    padding: .7rem .85rem;
    border: 1px solid #f0dca8;
    border-radius: var(--radio);
    background: var(--amarillo-lavado);
}

.rotulo-ficha {
    margin: 0 0 .4rem;
    color: var(--azul-primario);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .ficha-equipo { grid-template-columns: 1fr; gap: 0 0; }
    .ficha-equipo dt { margin-top: .5rem; }
}

/* ---------- Acciones de una fila ----------
   Los botones se acomodan en varias líneas si no caben, en vez de estirar la
   columna y obligar a desplazar la tabla en horizontal. Van con su nombre
   escrito: un ícono suelto solo se entiende si ya sabes lo que hace, y el
   `title` que lo explicaba no existe en un teléfono. */

.acciones-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

/* ---------- Bloque que aparece solo si aplica ----------
   El borde punteado dice que este grupo de campos depende de lo que se eligió
   arriba, y no es parte fija del formulario. */

.bloque-condicional {
    padding: .85rem;
    border: 1px dashed var(--azul-borde);
    border-radius: var(--radio);
    background: var(--azul-lavado);
}

.bloque-condicional .titulo-bloque {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .7rem;
    color: var(--azul-primario);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* En el listado la misma ruta va inline, junto al resto de la fila. */
.ruta-equipo .sep {
    color: var(--azul-secundario);
    font-size: .7rem;
    vertical-align: middle;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 767px) {
    .tabla-equipos { display: none; }
    .lista-tarjetas { display: flex; }

    /* El enlace del aviso baja debajo del texto: al costado quedaría en una
       columna de dos palabras de ancho y partiría el título en pedazos. */
    .aviso { flex-wrap: wrap; }
    .aviso .accion { margin-left: 2.4rem; }

    /* En el telefono el formulario avanza por pasos: se ve una seccion a la
       vez y los botones quedan fijos abajo. */
    .barra-pasos { display: block; }

    .modal-por-pasos .seccion-cabecera { pointer-events: none; }
    .modal-por-pasos .seccion-cabecera .chevron { display: none; }
    .modal-por-pasos .seccion-campos:not(.paso-actual) { display: none; }
    .modal-por-pasos .seccion-campos.paso-actual { border: 0; }
    .modal-por-pasos .seccion-campos.paso-actual .seccion-cabecera { display: none; }
    .modal-por-pasos .seccion-campos.paso-actual .seccion-cuerpo { display: block; padding: 0; }

    .modal-por-pasos .form-control,
    .modal-por-pasos .form-select { min-height: 48px; }

    .modal-por-pasos .modal-footer .btn { min-height: 52px; }
}