/* public/assets/css/mapa.css
   El plano de Punta Quequén: una solapa por paño (y por estacionamiento), cada
   uno con su lienzo donde el dueño pone las carpas, sombrillas y cocheras.

   El lienzo mide en puntos (los de la base). --esc es cuántos pixeles vale un
   punto: a zoom 1 el lienzo entra justo en el ancho del plano, y el control
   de zoom lo multiplica. Todo lo de adentro se dimensiona con --esc. */

/* Colores por tipo de alquiler, GLOBALES: los usa el plano y también la leyenda
   y el selector de fecha, que viven fuera de .plano. Si estuvieran solo dentro
   de .plano, la leyenda no podría leerlos y saldría sin color. */
:root {
    --t-temporada: #B23B32;   /* rojo */
    --t-mensual:   #146094;   /* azul */
    --t-quincena:  #3C9D63;   /* verde */
    --t-semana:    #F2A9C4;   /* rosado */
    --t-diario:    #EDC56A;   /* amarillo */
    --t-diez:      #7FB8DD;   /* celeste */
    --t-reserva:   #C0398B;   /* rosa fuerte */
    --t-cortesia:  #0E8A86;   /* verde-azulado: guardada / sin cargo */
}

.plano {
    /* Ancho natural del plano, medido en unidades. Si cambia la distribución de
       alguna fila hay que recalibrarlo: a zoom 1 el plano debe entrar justo.
       Lo definen las filas de sombras, que son las más anchas (13 de un lado). */
    --ancho-plano: 28.4;
    --zoom: 1;
    --u: calc(min(calc((100vw - 48px) / var(--ancho-plano)), 34px) * var(--zoom));
    --gap: calc(var(--u) * .16);

    /* Paleta del mapa impreso */
    --azul: #146094;
    --amarillo: #EDC56A;
    --amarillo-borde: #C79A3B;
    --arena-mapa: #FFE996;        /* el fondo amarillo del mapa */
    --camino: #FCC37E;            /* los caminos naranja del mapa */
    --camino-borde: #E9A55C;
    --arena-clara: #E9E5DF;
    --asfalto: #CBC3B8;
    --asfalto-linea: #A4A19D;
    --edificio: #E4E4E2;
    --edificio-borde: #7E7B76;
    --mar-1: #657987;
    --mar-2: #374D59;
    --rojo: #B23B32;
    --box: #FFFFFF;
    --linea-box: #3B3A37;
    --linea-auto: #B4AEA4;

    /* Colores por tipo de alquiler (leyenda del plano) */
    --t-temporada: #B23B32;   /* rojo */
    --t-mensual:   #146094;   /* azul */
    --t-quincena:  #3C9D63;   /* verde */
    --t-semana:    #F2A9C4;   /* rosado */
    --t-diario:    #EDC56A;   /* amarillo */
    --t-diez:      #7FB8DD;   /* celeste */
    --t-reserva:   #C0398B;   /* rosa fuerte */
    --t-cortesia:  #0E8A86;   /* verde-azulado: guardada / sin cargo */
}

.plano-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: var(--arena-clara);
    border: 1px solid #C9C2B6;
    border-radius: 4px;
    /* Contenedor de consulta: la playa mide su --u contra ESTE ancho (cqw),
       no contra el de la ventana, así entra justo sin scroll lateral. */
    container-type: inline-size;
    /* El plano es alto: casi siempre hay barra vertical. Reservamos su hueco
       SIEMPRE para que 100cqw mida el ancho realmente usable (sin la barra). Si
       no, el cálculo deja el plano ~15px más ancho que el espacio libre y, en
       PC, aparece una barra horizontal de unos pocos píxeles. */
    scrollbar-gutter: stable;
}

.plano-inner {
    width: max-content;
    min-width: calc(var(--u) * var(--ancho-plano));
    margin: 0 auto;
}

/* Bootstrap ya esconde lo que tiene [hidden]; esto lo deja explicito, porque
   de eso depende que las solapas muestren una vista por vez. */
.plano-inner[hidden] { display: none; }

.plano-scroll::-webkit-scrollbar { height: 8px; }
.plano-scroll::-webkit-scrollbar-thumb { background: var(--asfalto-linea); border-radius: 4px; }


/* ============================================================
   UNIDADES
   Como en el mapa impreso: libre es la caja blanca con borde
   negro. Los demás estados la pintan encima.
   ============================================================ */
.unidad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font-weight: 700;
    border: 1px solid var(--linea-box);
    background: var(--box);
    color: #2B2620;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: filter .12s ease-out, transform .12s ease-out;
    overflow: hidden;
    flex: 0 0 auto;
}

.unidad-box .num {
    position: relative;
    z-index: 2;
    font-size: clamp(6px, calc(var(--u) * .4), 13px);
    line-height: 1;
    letter-spacing: -.02em;
}

/* En la unidad alquilada, el número arriba y el nombre del titular abajo. El
   nombre se recorta con "…" para no desbordar: completo está en el globo. */
.unidad-box.con-titular { flex-direction: column; }
.unidad-box .titular-nombre {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin-top: 1px;
    padding: 0 1px;
    font-size: clamp(5px, calc(var(--u) * .2), 9px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .unidad-box:hover {
        filter: brightness(1.06);
        transform: scale(1.08);
        z-index: 3;
    }
}

.unidad-box:active { transform: scale(.92); }

.unidad-box:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
    z-index: 4;
}

/* --- Estados ---
   Cada situación con su color y su textura, para que se distingan también
   impresas en blanco y negro o a contraluz:
     Libre      blanco, como figura en el mapa.
     Guardada   verde liso: se la guardamos al cliente, paga cuando viene.
     Reservada  rayado rojo: la pidió el cliente y todavía no dejó nada.
     Seña       rayado azul sobre naranja: pagó una parte, queda saldo.
     Paga       azul liso, cerrada. */
.estado-disponible {
    background: var(--box);
    border-color: var(--linea-box);
    color: #2B2620;
}

/* Guardada / sin cargo: se la guardamos al cliente (paga cuando viene) o es del
   dueño. No se vende. Va en verde-azulado para no confundirse con la quincena. */
.estado-cortesia {
    background-color: var(--t-cortesia);
    border-color: #0A5F5C;
    color: #EAF7F6;
}

/* Guardada vencida: el mismo verde-azulado -sigue siendo del cliente hasta que
   alguien la libere- con el borde rojo del aviso. El sistema no la vende solo. */
.estado-vencida {
    background-color: var(--t-cortesia);
    border-color: var(--rojo);
    box-shadow: inset 0 0 0 2px var(--rojo);
    color: #EAF7F6;
}

/* --- Colores por tipo de alquiler --- */
.estado-temporada { background-color: var(--t-temporada); border-color: #7E2A23; color: #FBEAE8; }
.estado-mensual   { background-color: var(--t-mensual);   border-color: #0C3F63; color: #EAF2F8; }
.estado-quincena  { background-color: var(--t-quincena);  border-color: #276B41; color: #EAF6EE; }
.estado-semana    { background-color: var(--t-semana);    border-color: #C56E90; color: #4A1F31; }
.estado-diario    { background-color: var(--t-diario);    border-color: #C79A3B; color: #4A3B14; }
.estado-diez_dias { background-color: var(--t-diez);      border-color: #4E88AD; color: #123445; }
.estado-reserva   { background-color: var(--t-reserva);   border-color: #8C2663; color: #FBE7F3; }

/* Impago: le queda saldo por cobrar. Rayas diagonales sobre cualquier color
   (se superponen porque los tipos pintan background-color, no el atajo). */
.impago {
    background-image:
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .55) 0 4px,
            transparent 4px 8px),
        repeating-linear-gradient(-45deg,
            rgba(0, 0, 0, .22) 3px 4px,
            transparent 4px 8px);
    background-blend-mode: normal;
}

/* El número tiene que leerse igual sobre las rayas. */
.impago .num {
    background: rgba(255, 255, 255, .85);
    color: #26221C;
    padding: 0 2px;
    border-radius: 2px;
}

/* Selector de fecha del plano. Cuando no es hoy, se resalta para que quede claro
   que se está mirando otra fecha. */
.fecha-plano { display: inline-flex; align-items: center; gap: .3rem; }
.fecha-plano input[type="date"] { width: auto; }
.fecha-plano input.fecha-otra {
    border-color: var(--t-reserva);
    box-shadow: 0 0 0 2px rgba(192, 57, 139, .25);
    font-weight: 600;
}

/* ============================================================
   HISTORIAL DE LA UNIDAD (versión moderna del cuadro del sistema viejo)
   ============================================================ */
.historial-box {
    border: 1px solid var(--borde, #D8D1C4);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.historial-cabecera {
    background: color-mix(in srgb, var(--marca, #113056) 12%, #fff);
    color: var(--marca-oscuro, #0B2140);
    font-weight: 800;
    font-size: .82rem;
    padding: .45rem .7rem;
    border-bottom: 1px solid var(--borde, #D8D1C4);
}
.historial-scroll { max-height: 190px; overflow-y: auto; }

.historial-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.historial-tabla thead th {
    position: sticky;
    top: 0;
    background: #F5F1E9;
    color: #6E675D;
    font-weight: 700;
    text-align: left;
    padding: .35rem .6rem;
    border-bottom: 1px solid var(--borde, #D8D1C4);
    white-space: nowrap;
}
.historial-tabla tbody td {
    padding: .38rem .6rem;
    border-bottom: 1px solid #F0ECE3;
    vertical-align: middle;
}
.historial-tabla tbody tr:last-child td { border-bottom: 0; }
.historial-tabla tbody tr:hover { background: #FBF9F4; }

/* La fila del alquiler que cae en la fecha que se está mirando */
.historial-tabla tr.hist-actual td {
    background: color-mix(in srgb, var(--marca, #113056) 10%, #fff);
    font-weight: 700;
}

/* El tipo, como pastilla del mismo color que en el plano */
.hist-tipo {
    display: inline-block;
    padding: .08rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid transparent;
}

/* Puntito rojo de "debe saldo" */
.hist-debe { color: var(--rojo); font-size: .7rem; vertical-align: middle; }

/* Filtro por fecha del historial */
.historial-filtro {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.historial-filtro input[type="date"] { width: auto; }

/* Pestañas del modal de la unidad con el color de la marca */
#modalImputar .nav-tabs .nav-link {
    color: var(--tinta-suave, #6E675D);
    font-weight: 700;
}
#modalImputar .nav-tabs .nav-link.active {
    color: var(--marca-oscuro, #0B2140);
    border-bottom-color: #fff;
}

/* Mini-cartel de alquiler diario rápido (clic derecho) */
.popup-rapido {
    position: fixed;
    z-index: 1090;
    width: 210px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--linea-box);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.popup-rapido.d-none { display: none; }

.estado-mantenimiento {
    background: #B9B4AC;
    border-color: #8E8981;
    color: #55514B;
}

/* Resaltado al buscar una unidad por número */
.unidad-destacada {
    animation: latido 1s ease-in-out 3;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--azul) !important;
    z-index: 5;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
    .unidad-destacada { animation: none; }
    .unidad-box { transition: none; }
}


/* ============================================================
   BARRA DE HERRAMIENTAS Y LEYENDA
   ============================================================ */
.plano-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.leyenda-estados {
    /* La leyenda vive fuera del .plano: le hacen falta sus colores */
    --box: #FFFFFF;
    --linea-box: #3B3A37;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    color: #5A544A;
}

.leyenda-estados span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.leyenda-estados span[hidden] { display: none; }

.leyenda-punto {
    width: 13px;
    height: 13px;
    border: 1px solid var(--linea-box);
    display: inline-block;
    flex: 0 0 auto;
}

.zoom-group .btn { min-width: 38px; font-weight: 700; }

.pista-scroll {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    color: #6B655B;
    padding-top: .3rem;
}

.plano.desplazable .pista-scroll { display: flex; }


/* ============================================================
   GLOBITO CON EL NOMBRE DEL TITULAR
   Cuelga del <body> con position:fixed para que no lo recorten
   el scroll del plano ni el overflow de la propia unidad.
   ============================================================ */
.globo-titular {
    position: fixed;
    z-index: 1080;
    max-width: min(260px, calc(100vw - 16px));
    padding: 6px 10px;
    border-radius: 7px;
    background: #2B2620;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease-out;
}

.globo-titular.visible { opacity: 1; }

/* La flechita: apunta hacia abajo, o hacia arriba si el globo cayo debajo */
.globo-titular::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #2B2620;
    top: 100%;
}

.globo-titular.abajo::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2B2620;
}

/* En pantallas tactiles no hay mouse: el nombre se ve al tocar la unidad */
@media (hover: none) {
    .globo-titular { display: none; }
}


/* ============================================================
   PAÑOS
   Cada paño es un lienzo de --lw x --lh puntos. Las unidades y los
   elementos llevan su punto (--x, --y) y su tamaño (--w, --h) en
   puntos; --esc los pasa a pixeles.
   ============================================================ */
.plano { --arena-pano: #F4E7C5; --asfalto-pano: #C9C4BB; }

.vista-pano {
    /* -8px: el aire del borde del contenedor, para que a zoom 1 no aparezca
       una barra horizontal de dos pixeles. */
    --esc: calc((100cqw - 8px) / var(--lw) * var(--zoom));
    min-width: 0;
}

.lienzo {
    position: relative;
    width: calc(var(--esc) * var(--lw));
    height: calc(var(--esc) * var(--lh));
    background-color: var(--arena-pano);
    overflow: hidden;
}

.lienzo.es-estacionamiento { background-color: var(--asfalto-pano); }

.lienzo > .pz {
    position: absolute;
    left: calc(var(--esc) * var(--x));
    top: calc(var(--esc) * var(--y));
    width: calc(var(--esc) * var(--w));
    height: calc(var(--esc) * var(--h));
}

/* --- Unidades --- */
.lienzo .unidad-box {
    border-radius: calc(var(--esc) * 4);
    border-width: max(1px, calc(var(--esc) * 1.2));
}

.lienzo .unidad-box .num {
    font-size: clamp(6px, calc(var(--esc) * 15), 24px);
}

.lienzo .unidad-box .titular-nombre {
    font-size: clamp(5px, calc(var(--esc) * 7.5), 12px);
}

/* La sombrilla es redonda */
.lienzo .u-sombrilla { border-radius: 50%; }
.lienzo .u-sombrilla .num { font-size: clamp(6px, calc(var(--esc) * 13), 21px); }

/* La carpa lleva la lona del frente: una franja arriba (o al costado si
   esta girada) que la distingue de un cartel. */
.lienzo .u-carpa::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 18%;
    background: rgba(0, 0, 0, .14);
    pointer-events: none;
}
.lienzo .u-carpa.girada::before { right: auto; bottom: 0; width: 18%; height: auto; }

/* La cochera, con la silueta del auto. Es angosta: el numero va mas chico
   para que entre con su letra (E12). */
.lienzo .u-cochera .num { font-size: clamp(6px, calc(var(--esc) * 11.5), 18px); }
.lienzo .u-cochera::after {
    content: "";
    position: absolute;
    inset: 14% 20%;
    border: max(1px, calc(var(--esc) * 1.2)) solid rgba(0, 0, 0, .18);
    border-radius: calc(var(--esc) * 5);
    pointer-events: none;
}
.lienzo .u-cochera.girada::after { inset: 20% 14%; }
.lienzo .u-cochera:not(.estado-disponible)::after { border-color: rgba(255, 255, 255, .45); }

/* --- Lo que no se alquila --- */
.lienzo .elemento {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    pointer-events: none;
    font-weight: 700;
    line-height: 1.05;
    font-size: clamp(6px, calc(var(--esc) * 12), 20px);
    letter-spacing: .04em;
    text-transform: uppercase;
    user-select: none;
}

.el-camino {
    background: #DDD5C4;
    color: #8B8170;
    border-radius: calc(var(--esc) * 3);
}
.es-estacionamiento .el-camino {
    background-color: #8E8A84;
    color: #F1EEE8;
    /* La linea cortada del medio */
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
    background-size: calc(var(--esc) * 24) max(1px, calc(var(--esc) * 2));
    background-repeat: repeat-x;
    background-position: 0 50%;
}
.es-estacionamiento .el-camino span { background: #8E8A84; padding: 0 .5em; }

/* Un camino parado: el texto y la linea del medio van a lo largo */
.lienzo .elemento.vertical span { writing-mode: vertical-rl; }
.es-estacionamiento .el-camino.vertical {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
    background-size: max(1px, calc(var(--esc) * 2)) calc(var(--esc) * 24);
    background-repeat: repeat-y;
    background-position: 50% 0;
}
.es-estacionamiento .el-camino.vertical span { padding: .5em 0; }

.el-mar {
    background:
        repeating-linear-gradient(180deg, transparent 0 calc(var(--esc) * 14), rgba(255, 255, 255, .16) calc(var(--esc) * 14) calc(var(--esc) * 17)),
        linear-gradient(180deg, #2C5878, #4F7F9E);
    color: rgba(255, 255, 255, .9);
    letter-spacing: .3em;
}

.el-edificio {
    background: #FBFAF7;
    border: max(1px, calc(var(--esc) * 1.5)) solid #6F6A62;
    color: #4B463F;
    border-radius: calc(var(--esc) * 2);
}

.el-texto {
    color: #113056;
    font-size: clamp(7px, calc(var(--esc) * 16), 26px);
}

.lienzo-vacio {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    padding: 1rem;
    color: rgba(58, 48, 32, .8);
    font-size: .85rem;
    pointer-events: none;
}
.lienzo-vacio span { color: rgba(58, 48, 32, .6); }

.pano-pie {
    font-size: .72rem;
    font-weight: 600;
    color: #6B655B;
    padding: .35rem .2rem 0;
}


/* ============================================================
   ARMAR EL PAÑO (solo el dueño)
   Como se arma un salón: se elige qué poner, se toca el lugar,
   se arrastra y con el clic derecho se cambia o se saca.
   ============================================================ */
.barra-armado {
    background: #113056;
    color: #EEF3F9;
    border-radius: 3px;
    padding: .5rem .6rem;
}
.barra-armado[hidden] { display: none; }

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

.armado-titulo { font-weight: 700; font-size: .85rem; margin-right: .4rem; }
.armado-titulo b { color: #F4D58D; }

.barra-armado .btn-light { font-weight: 600; }
.barra-armado .btn-light.activa {
    background: #F4D58D;
    border-color: #F4D58D;
    color: #113056;
    box-shadow: inset 0 0 0 2px #113056;
}

.armado-estado {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 600;
    opacity: .85;
    white-space: nowrap;
}
.armado-estado.error { color: #FFB4A8; opacity: 1; }

.armado-ayuda {
    margin: .4rem 0 0;
    font-size: .75rem;
    opacity: .85;
}
.armado-ayuda kbd { background: rgba(255, 255, 255, .18); color: #fff; font-size: .7rem; }

@media (max-width: 575.98px) {
    .armado-ayuda { display: none; }
}

/* Mientras se arma, el lienzo muestra una grilla para alinear y las
   unidades se mueven en vez de agrandarse bajo el puntero. */
.lienzo.armando {
    background-image:
        linear-gradient(rgba(17, 48, 86, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 48, 86, .08) 1px, transparent 1px);
    background-size: calc(var(--esc) * 20) calc(var(--esc) * 20);
}
.lienzo.armando.poniendo { cursor: crosshair; }

.lienzo.armando .unidad-box,
.lienzo.armando .elemento {
    cursor: move;
    transition: none;
    pointer-events: auto;
    touch-action: none;
}
.lienzo.armando .unidad-box:hover,
.lienzo.armando .unidad-box:active { transform: none; filter: none; }

.lienzo.armando .elemento { outline: 1px dashed rgba(17, 48, 86, .45); }

.lienzo .pz.elegido {
    outline: 2px solid #1F7AE0;
    outline-offset: 2px;
    z-index: 4;
}
.lienzo .pz.arrastrando { z-index: 6; opacity: .88; }

/* El tirador para estirar un camino, el mar o un edificio */
.lienzo.armando .elemento::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: max(10px, calc(var(--esc) * 12));
    height: max(10px, calc(var(--esc) * 12));
    background: linear-gradient(135deg, transparent 50%, #1F7AE0 50%);
    cursor: nwse-resize;
}

/* El recuadro para elegir varios con el mouse */
.armado-recuadro {
    position: absolute;
    border: 1px dashed #1F7AE0;
    background: rgba(31, 122, 224, .12);
    pointer-events: none;
    z-index: 7;
}

/* Los carteles flotantes del armado: poner algo y el menú del clic derecho */
.popup-armado {
    position: fixed;
    z-index: 1060;
    width: 260px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid var(--borde, #D8D1C4);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    padding: .65rem;
    font-size: .85rem;
}
.popup-armado[hidden] { display: none; }
.popup-armado .popup-titulo { font-weight: 700; margin-bottom: .45rem; color: #113056; }
.popup-armado label { font-size: .75rem; font-weight: 600; margin-bottom: .1rem; }
.popup-armado [data-solo][hidden] { display: none !important; }

.menu-armado { padding: .25rem 0; width: 230px; }
.menu-armado .popup-titulo { padding: .3rem .7rem .35rem; margin: 0; border-bottom: 1px solid #EEE9DF; font-size: .78rem; color: #6E675D; }
.menu-armado button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: .45rem .75rem;
}
.menu-armado button:hover { background: #F3F0E8; }
.menu-armado button.peligro { color: #B23B32; }
.menu-armado button[hidden] { display: none; }
.menu-armado button i { width: 1rem; text-align: center; }

/* Los botones de las solapas para sumar y editar paños */
.solapa-accion {
    background: none;
    border: 1px dashed var(--borde);
    border-radius: 3px;
    color: var(--marca);
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .7rem;
    min-height: 36px;
}
.solapa-accion:hover { border-color: var(--marca); background: rgba(17, 48, 86, .05); }