BODY {
    margin: 0;
}

#tarjetas{ 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    padding: 10px;
    justify-content: start;
    font-family: monospace;
    align-items: start;
}

.tarjeta {
    border: 3px solid #006800;
    background: #285c9f2e;
    padding: 5px;
    border-radius: 7px;
}

.tarjeta:has(details[open]),
.tarjeta:hover {
    box-shadow: 4px 4px 10px;
}

SUMMARY {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: auto 1fr;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px 10px;
    align-items: center;
}

details[open] > summary, 
SUMMARY:hover {
    background: #7a7597;
    color: white;
    transition: .8s;
    border-radius: 5px;
}

details[open] > summary {
    border-radius: 5px 5px 0 0 !important;
}

.tags {
    background: #f0ffd77a;
    border: 1px solid black;
    border-radius: 0 0 5px 5px;
    padding: 3px 5px;
}

.cant {
    text-align: center;
}

.tag::before {
  content: "🏷️ ";
  margin-right: 4px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* espacio entre icono y texto */
}

#cabecera {
    text-align: center;
    background: #00000033;
    box-shadow: #8d8585 0 0 12px 6px;
}

#cabecera button {
    border-radius: 8px;
    padding: 7px 10px;
    margin: 10px;
    cursor: pointer;
    box-shadow: inset -1px -2px 8px 0px;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

#cabecera button.pressed {
    box-shadow: inset 5px 5px 6px -3px;
    background-color: #6aff4082;
    transform: scale(0.92);
}


#cabecera button::before {
    content: "🔘";
    margin-right: 0.4em;
}

#cabecera button.pressed::before {
    content: "🟢";
    margin-right: 0.4em;
}

#reloadBar {
    width: 100%;
    height: 6px;
    overflow: hidden;
}

#reloadFill {
    width: 0%;
    height: 100%;
    background-color: blue;
    transition: width 0.1s linear;
}


#segs {
    width: 50px;
    text-align: right;
}

#segs:invalid {
    background: tomato;
}

#segs[readonly] {
    background: transparent;
    border: none;
    color: black;
    cursor: pointer;
}


#screenBlur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);   /* el BLUR real */
    background: rgba(0, 0, 0, 0.2); /* oscurecido opcional */
    
    pointer-events: all;   /* bloquea clics */
    z-index: 99999;        /* por encima de todo */
    display: none;         /* oculto inicialmente */
}