* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f2f3f5;
    color: #111;
    --header-h: 110px;
}

/* cuando filtros abiertos */
body.filtros-abiertos {
    --header-h: 160px;
}


/* =========================
   HEADER
========================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    padding: 14px 16px 20px;
    z-index: 500; /* MÁXIMO */    
}


.header h1 {
    margin: 0 0 10px;
    font-size: 1.5em;
    font-weight: 600;
}

.header {
    --header-height: 150px;
}

.filtros-extra.abierto {
    display: flex;
}

.filtros-extra.abierto ~ * {
    --header-height: 220px;
}



/* FILTROS TOP */
.filtros-top {
    display: flex;
    gap: 8px;
}

.filtros-top input {
    flex: 1;
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 0.95em;
}

.filtros-top button {
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: #111;
    color: #fff;
    cursor: pointer;
}

/* FILTROS EXTRA */
.filtros-extra {
    display: none;
    margin-top: 10px;
    gap: 8px;
    flex-wrap: wrap;
}

.filtros-extra.abierto {
    display: flex;
}

.filtros-extra input,
.filtros-extra select,
.filtros-extra button {
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 0.9em;
}

/* =========================
   MAIN
========================= */
main {
    padding: calc(var(--header-h) + 20px) 16px 32px;
    max-width: 900px;
    margin: 0 auto;
}


/* =========================
   FECHAS STICKY
========================= */
:root {
    --header-real-h: 0px;
}

.fecha {
    position: sticky;
    top: var(--header-real-h);
    background: #f2f3f5;
    font-weight: 600;
    font-size: 1.25em;
    padding: 14px 0;
    margin: 26px -10px 0 -10px;
    z-index: 200;
    border-bottom: 2px solid #000;
}



/* =========================
   EVENTOS
========================= */
.evento {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    background: #fff;
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform .15s ease, box-shadow .15s ease;
}

.evento:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.evento img {
    width: 95px;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* INFO */
.evento-info {
    flex: 1;
}

.evento-info h3 {
    margin: 0 0 4px;
    font-size: 1.05em;
    letter-spacing: .4px;
}

/* META */
.evento-meta {
    font-size: 0.85em;
    color: #666;
}

/* PIE */
.evento-pie {
    margin-top: 8px;
}

.evento-pie .hora {
    font-size: 0.9em;
    font-weight: 500;
    color: #111;
}

.evento-pie .precio {
    font-size: 0.8em;
    color: #111;
    opacity: .8;
}

/* =========================
   LOADING
========================= */
.loading {
    text-align: center;
    font-size: 1.05em;
    color: #777;
}

/* =========================
   MODALES
========================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 600;
    align-items: center;
    justify-content: center;
}

.modal.activo {
    display: flex;
}

.modal img {
    max-width: 92%;
    max-height: 92%;
    border-radius: 6px;
}

.modal-cerrar {
    position: absolute;
    top: 22px;
    right: 32px;
    font-size: 34px;
    color: #fff;
    cursor: pointer;
}

/* MODAL PASSWORD */
.modal-box {
    background: #fff;
    padding: 22px;
    border-radius: 10px;
    width: 280px;
}

.modal-box h3 {
    margin-top: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

button {
    cursor: pointer;
}

#reset {
    background: #c0392b;
    color: #fff;
    border: none;
}

#reset:hover {
    background: #a93226;
}



/* =========================
   BOTON OCULTAR
========================= */
.btn-ocultar{
    position:absolute;
    top:8px;
    right:8px;
    background:transparent;
    color:#111;
    border:none;
    width:28px;
    height:28px;
    font-size:22px;
    line-height:28px;
}

/* solo visible en móvil */
@media(min-width:768px){
    .btn-ocultar{display:none;}
}


/* solo visible en móvil */
@media(min-width:768px){
    .btn-ocultar{display:none;}
}




/* =========================
   MODAL PASSWORD
========================= */

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:8px;
}

.btn-icon{
    width:32px;
    height:32px;
    border-radius:10%;
    border:none;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;    
}

/* ROJO */
.btn-cancelar{
    background:#e74c3c;
    color:white;
    padding:10px;
}

.btn-cancelar:hover{
    background:#c0392b;
}

/* VERDE */
.btn-confirmar{
    background:#2ecc71;
    color:white;
    padding:10px;
}

.btn-confirmar:hover{
    background:#27ae60;
}

.password-row{
    display:flex;
    align-items:center;
    gap:8px;
}

/* input */
#password-input{
    flex:1;
    padding:8px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:14px;
    width: 80%;
}