:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f2eee5;background:#111415;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}.site-header{max-width:1250px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 28px;gap:20px}.brand{font-size:12px;font-weight:800;letter-spacing:.12em;display:flex;align-items:center;gap:12px}.brand small{color:#a8aaa6}.logo{font-size:27px;color:#f6a857}.site-header nav{display:flex;gap:22px;font-size:13px;color:#d4d0c9}.page{max-width:1250px;margin:0 auto;padding:0 28px 70px}.hero{padding:65px 0 58px;border-bottom:1px solid #303534}.eyebrow{letter-spacing:.20em;text-transform:uppercase;color:#edae65;font-size:11px;font-weight:800}.hero h1{font-family:Georgia,serif;font-size:clamp(56px,9vw,118px);line-height:1.02;letter-spacing:-.06em;margin:10px 0 20px}.hero h1 em{color:#f3a857;font-weight:normal}.hero>p:not(.eyebrow){max-width:680px;color:#c9cbc8;line-height:1.75}.hero .disclaimer{font-size:12px!important;color:#8e9390!important}.filters{display:flex;align-items:end;flex-wrap:wrap;gap:15px;margin:30px 0 40px}.filters label,.form label{display:flex;flex-direction:column;gap:8px;color:#aeb3ae;font-size:12px}.filters label:first-child{flex:1;min-width:210px}.filters input,.form input,.form textarea,.form select{width:100%;border:1px solid #39413e;padding:13px 14px;border-radius:7px;background:#1e2423;color:white;outline:none}.filters input:focus,.form input:focus,.form textarea:focus,.form select:focus{border-color:#f3a857}.filters label:nth-child(2){width:125px}.button{border:1px solid #4b504e;border-radius:7px;padding:11px 15px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;gap:6px}.button:hover{text-decoration:none;filter:brightness(1.12)}.accent{background:#f3aa59;color:#171717;border-color:#f3aa59}.subtle{background:#252b29;color:#f1f1ed}.disabled{opacity:.4;pointer-events:none}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-heading h2{font-size:21px}.section-heading span,.metadata{font-size:11px;color:#a5aaa5;letter-spacing:.04em}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}.card{overflow:hidden;border:1px solid #353b39;border-radius:12px;background:#1a1f1e}.art{aspect-ratio:1/1;position:relative;overflow:hidden;background:#282f2c}.art img{width:100%;height:100%;object-fit:cover;display:block}.art-overlay{position:absolute;inset:auto 15px 14px;display:flex;justify-content:space-between;font-weight:800;color:white;font-size:11px;text-shadow:0 2px 5px #000}.card-body{padding:18px}.card h3{font-family:Georgia,serif;font-size:21px;line-height:1.2;min-height:50px;margin:10px 0 5px}.artist{font-size:12px;color:#aeb7b0;min-height:34px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.actions .button{flex:1}.footer{text-align:center;color:#868e8a;padding:35px 20px;border-top:1px solid #323734;font-size:11px}.modal{background:#1c2320;color:#eee;border:1px solid #444;border-radius:13px;width:min(780px,94vw);max-height:90vh;padding:30px;box-shadow:0 20px 80px #000b}.modal::backdrop{background:#000b}.close{position:absolute;right:12px;top:8px;background:none;color:white;border:0;font-size:32px;cursor:pointer}.modal-art{width:170px;aspect-ratio:1;object-fit:cover;float:left;margin:0 25px 12px 0;border-radius:8px}.modal-text h2{font-family:Georgia,serif;font-size:32px}.modal-text h3{color:#f3a857}.description{white-space:pre-line;line-height:1.65}.note{font-size:12px;color:#b1b7b2}.player{position:fixed;z-index:20;bottom:0;left:0;right:0;background:#282f2c;border-top:2px solid #f3aa59;display:flex;gap:15px;align-items:center;padding:12px max(15px,calc((100vw - 1150px)/2))}.player[hidden]{display:none}.player-text{max-width:280px;font-size:12px;flex:1}.player audio{flex:3;min-width:130px}.admin-wrap{max-width:900px;margin:50px auto;padding:0 24px}.admin-wrap h1{font-family:Georgia,serif}.form{display:grid;gap:20px;max-width:650px}.form textarea{min-height:120px}.status{border-left:3px solid #f3aa59;background:#33332b;padding:14px;margin:18px 0}.admin-list{width:100%;border-collapse:collapse;margin:30px 0}.admin-list td,.admin-list th{padding:14px 9px;border-bottom:1px solid #343b38;text-align:left;font-size:13px}.helper{font-size:12px;color:#acb3ae;line-height:1.6}.danger{color:#ff9d90}@media(max-width:600px){.site-header{align-items:flex-start;flex-direction:column;padding:20px}.page{padding:0 20px 50px}.hero{padding:35px 0}.modal-art{float:none;width:120px}.modal{padding:22px}.player{flex-wrap:wrap}.player audio{width:100%;order:2}.admin-list{display:block;overflow-x:auto}}

/* Cabecera compacta: las grabaciones son el contenido principal */
.hero{padding:22px 0 20px}
.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 8px}
.hero>p:not(.eyebrow){line-height:1.4;margin:7px 0;max-width:850px}
.hero .eyebrow{font-size:10px;margin:0}
.filters{margin:19px 0 21px}
@media(max-width:600px){.hero{padding:16px 0}.hero h1{font-size:34px}}

/* V3: tarjetas estrictamente 1:1, sin imagen, con descripcion y controles. */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.card{aspect-ratio:1/1;min-width:0}
.card-inner{height:100%;display:flex;flex-direction:column;padding:18px;gap:10px;min-height:0}
.card-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:750;color:#e9af76;letter-spacing:.07em}
.card-main{flex:1;min-height:0;overflow:hidden}
.card h3{font-size:clamp(17px,1.7vw,22px);min-height:0;margin:4px 0 8px;line-height:1.18;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .artist{min-height:0;margin:0 0 8px;color:#e0ded8;font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-description{font-size:12px;line-height:1.48;color:#b0bcb4;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.card-bottom{margin-top:auto}.card .metadata{margin-bottom:10px}
.card .actions{margin-top:0;flex-wrap:nowrap}.card .actions .button{padding:10px 5px;min-width:0}
.modal-art{display:none}
@media(max-width:380px){.card-inner{padding:13px}.card-description{-webkit-line-clamp:3}}

/* Navegacion: 10 registros por pagina */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:30px 0 12px}
.pagination span{color:#aeb3ae;font-size:12px;margin-right:8px}
.pagination a[aria-current="page"]{pointer-events:none}

/* Administracion: fichas identificables, escucha integrada y paginacion propia */
.admin-wide{max-width:1120px}
.admin-records{display:grid;gap:12px;margin-top:16px}
.admin-record{border:1px solid #353b39;background:#1a1f1e;border-radius:12px;padding:19px;display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.admin-record-main{flex:1;min-width:0}
.admin-record h2{font-family:Georgia,serif;font-size:19px;margin:5px 0;line-height:1.3}
.admin-record-meta{color:#e9af76;font-size:11px;margin:0}
.admin-record-artist{margin:6px 0;font-size:13px;color:#e5e6e2;font-weight:600}
.admin-record-description{font-size:12px;color:#aeb7b0;line-height:1.55;max-height:3.1em;overflow:hidden}
.admin-audio{display:grid;gap:9px;margin-top:14px;font-size:12px;overflow-wrap:anywhere}
.admin-audio audio{display:block;width:100%;max-width:620px;height:42px}
.admin-filters{margin:20px 0 12px}
@media(max-width:650px){.admin-record{flex-direction:column;gap:12px}.admin-record>.button{width:100%}}

/* Lote 14: anchuras del filtro publico y select completo. */
.page > .filters {display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.page > .filters > label:first-child {flex:0 1 360px;min-width:210px;max-width:360px}
.page > .filters > label:nth-child(2) {flex:0 0 235px;width:235px;min-width:235px}
.page > .filters > label:nth-child(3) {flex:0 0 100px;width:100px}
.page > .filters > label > select,
.page > .filters > label > input {display:block;width:100%;height:44px;min-height:44px;border:1px solid #39413e;border-radius:7px;background:#1e2423;color:#f2eee5;font:inherit;font-size:13px;padding:10px 12px;box-sizing:border-box}
.page > .filters > label > select {appearance:auto;padding-right:8px;text-overflow:clip;white-space:nowrap}
.page > .filters > .button {min-height:44px}
@media(max-width:700px){
 .page > .filters > label:first-child {flex:1 1 100%;max-width:none}
 .page > .filters > label:nth-child(2) {flex:1 1 210px;min-width:210px;width:auto}
 .page > .filters > label:nth-child(3) {flex:0 1 105px}
}
@media(max-width:420px){
 .page > .filters > label:nth-child(2) {flex:1 1 100%;min-width:0}
 .page > .filters > label:nth-child(3) {flex:1 1 100%;width:auto}
}