/* STB Catálogo — capa visual, inspirada en design/stb-responsive-command-center.
   No modifica los módulos externos al catálogo ni la autenticación. */
.troop-catalogue,.troop-modal{
 --cc-night:#071625;--cc-navy:#0b2034;--cc-surface:#132d44;
 --cc-gold:#d9b77d;--cc-gold-light:#f3d29a;--cc-ink:#f7ebd5;
 --cc-muted:#afc3d6;--cc-border:#886f49;
}
/* Cabecera con el mismo castillo cinematográfico de la landing. */
.troop-catalogue{gap:17px;padding:5px 0 34px;color:var(--cc-ink)}
.troop-catalogue-intro{
 position:relative;isolation:isolate;overflow:hidden;
 display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
 min-height:clamp(170px,19vw,230px);padding:clamp(22px,3.2vw,38px);
 border:1px solid #c09b61;border-radius:16px;
 background:linear-gradient(90deg,#05121ff7 0%,#081a2cd8 43%,#07162373 82%),
 url('/static/visual/hero-castillo.webp') center 49%/cover no-repeat;
 box-shadow:0 15px 38px #0006,inset 0 0 40px #06152477;
}
.troop-catalogue-intro::after{
 content:"";position:absolute;inset:6px;z-index:-1;pointer-events:none;
 border:1px solid #d7b77d40;border-radius:10px;
}
.troop-catalogue-intro .eyebrow{
 color:var(--cc-gold-light);font-size:11px;font-weight:750;
 letter-spacing:.22em;text-shadow:0 2px 6px #000;
}
.troop-catalogue-intro h1{
 margin:0 0 4px;font:700 clamp(29px,3.7vw,45px)/1.1 Georgia,serif;
 letter-spacing:-.025em;color:#ffe5b9;text-shadow:0 4px 15px #000c;
}
.troop-catalogue-intro .muted{
 font-size:clamp(12px,1.5vw,15px);line-height:1.55;
 color:#e0e4e7;max-width:590px;text-shadow:0 2px 8px #000a;
}
/* Categorías: superficies azul acero con acentos de bronce. */
.troop-categories{grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:11px}
.troop-category{
 position:relative;overflow:hidden;align-items:stretch;min-height:91px;
 padding:15px 16px;text-align:left;color:#e7e9ec;
 border:1px solid #506679;border-radius:14px;
 background:radial-gradient(ellipse at 100% 0%,#52718a30,transparent 64%),
 linear-gradient(145deg,#1a344a,#0c2136);
 box-shadow:0 7px 19px #0004,inset 0 1px #f6dea914;
 transition:border-color .16s ease,transform .16s ease;
}
.troop-category::after{
 content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;
 background:linear-gradient(90deg,transparent,#be9c67,transparent);opacity:.3;
}
.troop-category:hover:not(:disabled){transform:translateY(-2px);border-color:#f3d29a}
.troop-category.is-active{
 border-color:#e4bb7b;color:#ffe5b9;
 background:radial-gradient(circle at 100% 0%,#b68b493b,transparent 68%),
 linear-gradient(145deg,#294660,#122a42);
 box-shadow:0 10px 24px #0006,inset 0 1px #f4d69d40;
}
.troop-category.is-active::after{opacity:1}
.troop-category.is-pending{opacity:.58}
.troop-category strong{color:#f2e4d0;font-size:clamp(14px,1.5vw,17px)}
.troop-category small{color:#a8bdcf}
.troop-count{
 padding:2px 8px;border:1px solid #856c4c;border-radius:8px;
 background:#071c30c2;color:#f1ca8c;
 font-variant-numeric:tabular-nums;
}
/* Filtros unificados con el lenguaje visual de Command Center. */
.troop-catalogue-controls{
 gap:14px;padding:17px;border:1px solid #3e576c;border-radius:15px;
 background:linear-gradient(140deg,#152d43,#0b1c2d);
 box-shadow:0 10px 25px #0003;
}
.troop-catalogue-controls label{font-size:12px;font-weight:650;color:#c3cfda}
.troop-catalogue-controls input,.troop-catalogue-controls select{
 width:100%;min-height:45px;padding:10px 13px;font-size:15px;
 border:1px solid #48657b;border-radius:9px;background:#071a2bc9;color:#f6e7d2;
}
#catalogo-status{
 min-height:20px;padding:0 2px 9px;border-bottom:1px solid #3b5264;
 color:#afc3d6;font-size:12px;line-height:1.5;
}
/* Tarjetas con retratos más expresivos y tipografía medieval ligera. */
.troop-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:13px}
.troop-card{
 position:relative;overflow:hidden;min-height:122px;padding:14px;gap:13px;
 border:1px solid #3e5a72;border-radius:14px;color:#f5e6d0;
 background:radial-gradient(ellipse at 0% 0%,#3659783d,transparent 65%),
 linear-gradient(135deg,#1a3349,#0d2236);
 box-shadow:0 9px 23px #0005,inset 0 1px #edd29a16;
 transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.troop-card:hover,.troop-card.selected{
 transform:translateY(-2px);border-color:#dbb678;
 background:radial-gradient(ellipse at 0% 0%,#4467835c,transparent 65%),
 linear-gradient(135deg,#25445c,#122b41);
 box-shadow:0 12px 27px #0007;
}
.troop-portrait{
 flex:0 0 92px;width:92px;height:99px;border:1px solid #607283;border-radius:11px;
 background:radial-gradient(circle at 50% 38%,#3d5671,#0a1a2a 76%);
}
.troop-card-image{width:100%;height:100%;padding:3px;object-fit:contain}
.troop-card-name{font:700 clamp(16px,1.4vw,19px)/1.24 Georgia,serif;color:#f9e3be}
.troop-card-original{color:#aebdca;font-size:11px}
.troop-card-stats{gap:12px;font-size:12px;color:#d9e1e7;font-variant-numeric:tabular-nums}
.troop-tier{
 padding:2px 8px;border:1px solid #f0c98f99;border-radius:6px;
 background:linear-gradient(125deg,#8b6a40,#cda36a);color:#111e2b;font-size:11px;
}
.troop-class{font-size:11px;color:#bec9d2}
/* Modal: espacio real para retrato. El panel de datos conserva scroll independiente. */
.troop-modal{
 width:min(1180px,calc(100vw - 26px));max-width:1180px;
 height:min(90dvh,930px);max-height:calc(100dvh - 18px);
 border:1px solid #d2ae75;background:#0d2235;box-shadow:0 28px 90px #000c;
}
.troop-modal .troop-detail{grid-template-columns:minmax(0,43%) minmax(0,57%)}
.troop-modal .troop-detail-head{
 gap:10px;padding:26px 17px 22px;
 background:linear-gradient(150deg,#172f45,#081a2d 78%);
 border-right:1px solid #675b4b;
}
.troop-modal .troop-detail-title h2{
 font:700 clamp(23px,2.6vw,32px)/1.2 Georgia,serif;
 color:#f8deb1;text-align:center;text-shadow:0 2px 12px #0008;
}
.troop-modal .troop-detail-art{
 flex:1 1 0;width:100%;min-height:0;gap:10px;
 align-items:center;justify-content:stretch;padding:5px 0 0;
 background:radial-gradient(ellipse at 50% 48%,#45668042,transparent 66%);
}
.troop-modal .troop-detail-art .troop-detail-image{
 flex:1 1 0;display:block;width:100%;height:100%;
 max-width:100%;max-height:100%;min-height:0;padding:0;margin:0;
 object-fit:contain;border:0;border-radius:0;background:none;
 filter:drop-shadow(0 7px 14px #0009);
}
.troop-modal .troop-detail-art .troop-edit-btn{
 flex:0 0 auto;align-self:center;max-width:100%;
}
.troop-modal .troop-detail-content{
 padding:60px 27px 28px;background:linear-gradient(140deg,#10273c,#0b1d2f 80%);
}
.troop-modal .troop-detail-content .troop-detail-section{
 border-bottom:1px solid #42536870;padding-bottom:15px;margin-bottom:18px;
}
.troop-modal .troop-detail-content .troop-detail-section h3{
 font:700 20px Georgia,serif;color:#f4d49d;
}
.troop-modal .troop-detail-content .troop-stats dt{color:#b6c8d6;border-color:#42536b}
.troop-modal .troop-detail-content .troop-stats dd{color:#f4e7d4;border-color:#42536b}
.troop-modal .troop-edit-btn{
 border:1px solid #a28050;border-radius:9px;padding:8px 11px;
 background:linear-gradient(135deg,#1e3c51,#10283e);
 color:#f1d3a2;font-size:12px;font-weight:650;
}
.troop-modal .troop-edit-btn:hover{border-color:#f4cf90;background:#25485f}
.troop-modal .troop-modal-close{
 border-color:#ad8c5c;color:#fce2b8;
 background:linear-gradient(140deg,#243d53,#0b1e32);
 box-shadow:0 4px 15px #0009;
}
.troop-modal .troop-detail.is-editing{background:linear-gradient(135deg,#172d43,#0a1b2d)}
@media(max-width:720px){
 .troop-catalogue-intro{min-height:174px;padding:22px 18px;background-position:center,62% center}
 .troop-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
 .troop-category{min-height:81px;padding:11px}
 .troop-catalogue-controls{padding:12px;gap:10px}
 .troop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .troop-card{flex-direction:column;align-items:stretch;min-height:0;padding:9px;gap:9px}
 .troop-portrait{flex:none;width:100%;height:clamp(120px,37vw,175px)}
 .troop-card-image{height:100%;padding:4px}
 .troop-card-name{font-size:clamp(15px,3.8vw,18px)}
 .troop-card-stats{flex-wrap:wrap;gap:5px 10px}
 .troop-modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
 .troop-modal .troop-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .troop-modal .troop-detail-head{padding:12px 50px 8px 12px;gap:5px;border-right:0;border-bottom:1px solid #65533d}
 .troop-modal .troop-detail-title h2{font-size:clamp(19px,5vw,24px);text-align:left}
 .troop-modal .troop-detail-art{
   flex:initial;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;
 }
 .troop-modal .troop-detail-art .troop-detail-image{
   flex:0 1 auto;width:auto;height:auto;
   max-width:min(75vw,300px);max-height:min(31dvh,275px);
 }
 .troop-modal .troop-detail-content{padding:16px 14px 24px}
 .troop-modal .troop-detail-content .troop-detail-section h3{font-size:18px}
 .troop-modal .troop-modal-close{top:9px;right:9px}
}
@media(max-width:400px){
 .troop-catalogue-intro h1{font-size:30px}
 .troop-catalogue-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .troop-card-original{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .troop-category,.troop-card{transition:none}
}