:root{
  --red:#A32638; --red-dark:#7A1C29;
  --blue:#3D6E93; --blue-dark:#2B5170;
  --gold:#D9A526; --gold-dark:#A87A17;
  --cream:#FAF6EC; --paper:#FFFFFF;
  --ink:#242220; --ink-soft:#605B52; --line:#E4DCC8;
  --green:#2C6B44; --green-soft:#E4EFE7;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--cream); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.55; -webkit-text-size-adjust:100%;}
img,svg{max-width:100%;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em;}
h1{font-size:clamp(22px,2.6vw,28px);}
h2{font-size:20px;}
h3{font-size:16px;}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit;}
button{cursor:pointer;}
.mono{font-family:'IBM Plex Mono',monospace;}
.muted{color:var(--ink-soft);}
.hidden{display:none !important;}

/* Franja de bandera y aviso de prototipo */
.flagbar{display:flex; height:6px;}
.flagbar span{flex:1;}
.flagbar span:nth-child(1),.flagbar span:nth-child(5){background:var(--red);}
.flagbar span:nth-child(2),.flagbar span:nth-child(4){background:var(--blue); flex:0.5;}
.flagbar span:nth-child(3){background:var(--gold);}
.protobadge{background:var(--ink); color:#F3EEDD; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; padding:8px 16px;}
.protobadge b{color:var(--gold);}

/* Encabezado */
.top{background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 32px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:18px;}
.crest{width:30px; height:34px; flex-shrink:0;}
.crest svg{width:100%; height:100%; display:block;}
.userbox{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--ink-soft);}
.badge{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.04em; background:var(--gold); color:#3A2A05; padding:3px 9px; border-radius:12px; vertical-align:middle;}

/* Acceso */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--cream);}
.login-card{width:min(940px,100%); background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--red); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; box-shadow:0 18px 48px rgba(36,34,32,0.10);}
.login-left{padding:44px;}
.login-left h1{margin-top:14px;}
.login-left label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-top:16px;}
.login-right{position:relative; background:#111C2E; color:#FFF6E4; padding:44px; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.login-right h2{color:#FFF6E4;}
.login-right p{color:#D6D0C2; font-size:14.5px; margin-top:10px;}
.login-right .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(163,38,56,0.20) 0%,rgba(10,16,28,0) 55%);}
.login-right > *{position:relative; z-index:1;}
.logo{width:52px; height:60px;}
.logo svg{width:100%; height:100%; display:block;}
.face{border:1px dashed rgba(217,165,38,0.55); display:grid; place-items:center; margin:22px 0 16px; padding:14px; background:rgba(255,246,228,0.05);}
.face-svg{width:100%; max-width:190px; height:auto; display:block;}
.face .scan{animation:scan 3s ease-in-out infinite;}
.face.scanning{border-style:solid; border-color:var(--gold);}
.face.scanning .scan{animation-duration:0.6s;}
@keyframes scan{0%,100%{transform:translateY(0);} 50%{transform:translateY(134px);}}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* Formularios y botones */
.input{width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--cream); color:var(--ink); border-radius:3px; margin:6px 0 4px;}
.input:focus{outline:none; border-color:var(--blue);}
.btn{border:1px solid transparent; border-radius:3px; padding:11px 18px; font-size:14px; font-weight:500;}
.primary{background:var(--red); color:#fff;}
.primary:hover{background:var(--red-dark);}
.btn:disabled,.btn[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none;}
.secondary{background:var(--paper); border-color:var(--line); color:var(--ink);}
.secondary:hover{border-color:var(--blue); color:var(--blue-dark);}
.ghost{background:transparent; border-color:var(--line); color:var(--ink-soft);}
.ghost:hover{border-color:var(--red); color:var(--red);}
.link{background:none; border:none; padding:0; font-size:13px; color:var(--red); border-bottom:1px solid var(--red);}
.full{width:100%; margin-top:14px;}

/* Estructura */
.container{max-width:1140px; margin:0 auto; padding:32px;}
.content{margin-top:26px;}
.nav{display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px;}
.nav button{display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-size:13.5px; color:var(--ink-soft);}
.nav .ico-svg{width:16px; height:16px; flex-shrink:0;}
.nav button:hover{border-color:var(--blue); color:var(--blue-dark);}
.nav button.active{background:var(--ink); border-color:var(--ink); color:#F3EEDD;}
.hero{display:flex; justify-content:space-between; gap:24px; align-items:flex-end; flex-wrap:wrap; margin-bottom:26px;}
.hero .lbl{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-dark); display:block; margin-bottom:4px;}
.hero p{font-size:14.5px; margin-top:4px;}

/* Tarjetas */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.card{background:var(--paper); border:1px solid var(--line); padding:22px;}
.card.flush{padding:0;}
.card + .card, .grid + .card{margin-top:18px;}
.grid .card{margin-top:0;}
.card h2{font-size:19px;}
.card h3{margin:10px 0 6px;}
.card p{font-size:14px;}
.card.stat{border-top:3px solid var(--blue);}
.card.stat:nth-child(2){border-top-color:var(--red);}
.card.stat:nth-child(3){border-top-color:var(--gold);}
.card.stat:nth-child(4){border-top-color:var(--green);}
.card .ico{width:36px; height:36px; display:grid; place-items:center; background:var(--cream); border:1px solid var(--line); color:var(--blue-dark);}
.card .ico-svg{width:20px; height:20px;}
.card.stat:nth-child(2) .ico{color:var(--red);}
.card.stat:nth-child(3) .ico{color:var(--gold-dark);}
.card.stat:nth-child(4) .ico{color:var(--green);}
.sq{width:8px; height:8px; background:var(--red); display:inline-block;}
.big{font-family:'Fraunces',serif; font-size:30px; font-weight:600; line-height:1.1;}

/* Tablas */
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.scroll-hint{display:none; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); padding:10px 16px 12px; border-top:1px solid var(--line); margin:0;}
.table{width:100%; border-collapse:collapse; font-size:14px;}
.table th{text-align:left; padding:12px 14px; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.table td{padding:14px; border-bottom:1px solid var(--line);}
.table tr:last-child td{border-bottom:none;}
.table .code{font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

/* Estados */
.status{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:12px; background:var(--green-soft); color:var(--green);}
.status.warn{background:#FBEAD3; color:var(--gold-dark);}
.status.info{background:#E5EDF3; color:var(--blue-dark);}

/* Pasos del trámite */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:0 0 22px;}
.step{padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--line); font-size:13px; color:var(--ink-soft); text-align:center;}
.step .n{font-family:'IBM Plex Mono',monospace; font-size:11px; display:block; margin-bottom:2px;}
.step.active{border-top-color:var(--red); color:var(--ink); font-weight:500;}
.step.done{border-top-color:var(--green); color:var(--green);}

/* Documento simulado */
.pdf{border:1px solid var(--line); border-top:4px solid var(--blue); background:var(--paper); padding:26px; margin-top:18px;}
.pdf-head{border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.04em; color:var(--ink-soft);}
.pdf-head b{display:block; font-family:'Fraunces',serif; font-size:15px; letter-spacing:0; color:var(--ink);}
.pdf p{font-size:14px; margin-top:6px;}
.pdf .btn{margin-top:18px;}
.notice{padding:13px 16px; background:#FBEAD3; border-left:3px solid var(--gold); color:#5A4207; font-size:13.5px; margin:14px 0;}
.notice.ok{background:var(--green-soft); border-left-color:var(--green); color:var(--green);}
.notice.bad{background:#F8E8EA; border-left-color:var(--red); color:var(--red-dark);}
.lbl{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-dark); display:block; margin-bottom:4px;}
.mismatch{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.mismatch .box{border:1px solid var(--line); padding:12px; background:var(--cream);}
.mismatch .box.warn{border-color:#E3B4BA; background:#F8E8EA;}
.mismatch .box .field-note{margin-bottom:4px;}
.mismatch .box p{margin:0; font-size:15px;}
.review-item.bad{background:#F8E8EA; border-color:#E3B4BA;}
.review-item.bad .mark{color:var(--red);}
.sala-card{text-align:center; padding:40px 24px;}
.sala-pulse{width:64px; height:64px; border-radius:50%; border:3px solid var(--gold); margin:0 auto 18px; animation:pulse 1.1s ease-in-out infinite;}
.ctx-alert{padding:13px 16px; background:#F8E8EA; border-left:3px solid var(--red); color:var(--red-dark); font-size:13.5px; margin:14px 0;}
.ctx-panel{max-height:720px; overflow:auto;}
.meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:16px;}
.meta-grid .span-2{grid-column:1 / -1;}
.meta-grid .field-note{margin-bottom:2px;}
.meta-grid p{margin:0; font-size:14px;}

/* Listas */
.list{display:grid; gap:0;}
.list-item{background:var(--paper); border:1px solid var(--line); border-bottom:none; padding:16px 18px; display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:14px;}
.list-item:last-child{border-bottom:1px solid var(--line);}
.list-item .muted{font-size:13px;}
.card .list-item{border-left:none; border-right:none; padding-left:0; padding-right:0;}
.card .list-item:first-child{border-top:none;}
.card .list-item:last-child{border-bottom:none; padding-bottom:0;}

.footer{border-top:1px solid var(--line); background:var(--paper); padding:26px 32px; text-align:center; color:var(--ink-soft); font-size:12.5px;}
.footer b{color:var(--ink);}

.modal{position:fixed; inset:0; background:rgba(12,16,24,0.62); display:grid; place-items:center; padding:20px; z-index:20;}
.modal-card{background:var(--paper); border-top:4px solid var(--red); max-width:600px; width:100%; padding:28px;}
.modal-card .lbl{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-dark); display:block; margin-bottom:4px;}
.modal-card p{font-size:14px;}

/* Catálogo de trámites */
.cat-filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.cat-filters button{background:transparent; border:1px solid var(--line); border-radius:20px; padding:7px 14px; font-size:13px; color:var(--ink-soft);}
.cat-filters button:hover{border-color:var(--blue); color:var(--blue-dark);}
.cat-filters button.active{background:var(--ink); border-color:var(--ink); color:#F3EEDD;}
.cat-card{display:flex; flex-direction:column; border-left:3px solid var(--line);}
.cat-card:hover{border-left-color:var(--blue);}
.cat-card.demo{border-left-color:var(--red);}
.cat-card .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-dark);}
.cat-card h3{margin:6px 0 8px;}
.cat-card .field-note{text-transform:none; font-size:11.5px; letter-spacing:0; line-height:1.5;}
.cat-card .btn-row{margin-top:auto; padding-top:16px;}
.cat-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px;}

/* Trámite: formulario + revisor */
.tramite-layout{display:grid; grid-template-columns:1.35fr 0.85fr; gap:16px; align-items:start;}
.tramite-layout.wide{grid-template-columns:1fr 1fr;}
.tramite-main .card + .card{margin-top:16px;}
.form-block{margin-top:22px;}
.form-block:first-of-type{margin-top:16px;}
.form-block h3{margin:0 0 4px;}
.field-note{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);}
.field .input{margin:6px 0 0;}
.field.span-2,.form-grid .span-2{grid-column:1 / -1;}
.input[readonly]{background:#F3EEDD; color:var(--ink-soft);}
textarea.input{resize:vertical; min-height:88px;}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}

.doc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.doc-slot{border:1px dashed var(--line); padding:14px; background:var(--cream);}
.doc-slot.ok{border-style:solid; border-color:var(--green); background:var(--green-soft);}
.doc-slot strong{display:block; font-size:14px;}
.doc-slot .muted{font-size:13px; margin-top:4px;}
.doc-slot .drop{margin-top:12px; background:var(--paper);}
.review-list{list-style:none; margin-top:14px; display:grid; gap:10px;}
.review-item{display:flex; gap:10px; padding:12px 14px; border:1px solid var(--line); background:var(--cream); font-size:14px; line-height:1.45;}
.review-item .mark{color:var(--green); font-weight:600; flex-shrink:0;}
.review-item.typing{opacity:.7; font-style:italic;}
.review-item.typing .mark{color:var(--ink-soft);}

.drop{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:14px; padding:18px; border:1px dashed var(--line); background:var(--cream); cursor:pointer;}
.drop:hover{border-color:var(--blue);}
.drop input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.file-list{list-style:none; margin-top:14px; display:grid; gap:8px;}
.file-list li{display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:13.5px;}
.file-chip{font-family:'IBM Plex Mono',monospace; font-size:12px; background:var(--cream); border:1px solid var(--line); padding:4px 8px;}

.card.chatbot{padding:0; display:flex; flex-direction:column; min-height:520px; max-height:720px; position:sticky; top:16px;}
.chatbot-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--cream);}
.chatbot-head .lbl{margin-top:4px; margin-bottom:0; text-transform:none; letter-spacing:0; font-size:12px; color:var(--ink-soft);}
.chatbot-head strong{display:block; font-family:'Fraunces',serif; font-size:16px;}
.chatbot-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--paper);}
.msg{max-width:92%; padding:10px 12px; font-size:13.5px; line-height:1.45;}
.msg p{margin:0; font-size:13.5px;}
.msg.bot{background:var(--cream); border:1px solid var(--line); align-self:flex-start;}
.msg.user{background:var(--blue-dark); color:#FFF6E4; align-self:flex-end;}
.msg.typing{opacity:0.7; font-style:italic;}
.chatbot-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--paper);}
.chatbot-form .input{margin:0;}
.chatbot-form .btn{flex-shrink:0;}

.zoom{background:#0E1624; color:#F3EEDD; overflow:hidden; border:1px solid #24344F;}
.zoom .muted{color:#B9C3D3;}
.zoom .lbl{color:var(--gold);}
.zoom-bar{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 16px; background:#111C2E; font-size:12.5px; font-family:'IBM Plex Mono',monospace;}
.zoom-body{display:grid; grid-template-columns:1fr; min-height:540px;}
.zoom-stage{position:relative; padding:14px; background:#0A101C;}
.zoom-tile{position:relative; background:#152033; overflow:hidden;}
.zoom-tile.main{min-height:460px; height:100%; display:grid; place-items:center; border-radius:8px;}
.zoom-tile.main .zoom-face{width:min(100%,440px); height:auto; display:block;}
.zoom-tile.self{position:absolute; right:22px; bottom:22px; width:176px; border-radius:8px; border:2px solid var(--gold); background:#152033;}
.zoom-tile.self .zoom-face{width:100%; height:auto; display:block;}
.zoom-tile.speaking{box-shadow:inset 0 0 0 3px #4CAF6A;}
.zoom-tag{position:absolute; left:10px; right:10px; bottom:10px; background:rgba(10,16,28,0.88); padding:8px 10px; border-radius:4px; font-size:12.5px;}
.zoom-tag b{display:block; font-family:'Fraunces',serif; font-size:14px;}
.zoom-live{display:inline-block; background:var(--red); color:#fff; font-size:10px; padding:2px 7px; border-radius:8px; margin-bottom:4px; letter-spacing:0.04em; text-transform:uppercase;}
.zoom-dock{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:12px; background:#111C2E;}
.zoom-ctrl{background:#24344F; color:#F3EEDD; border:1px solid #3D6E93; border-radius:20px; padding:8px 16px;}
.zoom-ctrl.on{border-color:#4CAF6A; color:#C8F0D2;}
.zoom-ctrl.leave{background:var(--red); border-color:var(--red);}
.zoom-ctrl:disabled{opacity:.4; cursor:not-allowed;}
.sound-bars{display:inline-flex; gap:2px; align-items:flex-end; height:12px; margin-left:8px; vertical-align:middle;}
.sound-bars i{width:3px; height:5px; background:#7DCF8A; display:block; animation:bars .7s ease-in-out infinite;}
.sound-bars i:nth-child(2){animation-delay:.12s;}
.sound-bars i:nth-child(3){animation-delay:.24s;}
.sound-bars i:nth-child(4){animation-delay:.08s;}
@keyframes bars{0%,100%{height:4px;} 50%{height:12px;}}
.zoom-join{padding:36px 20px 28px; text-align:center;}
.zoom-join .zoom-tile{max-width:340px; margin:0 auto 18px; border-radius:8px;}
.zoom-join-msg{font-family:'Fraunces',serif; font-size:22px; margin:10px 0 6px;}
.zoom-initials{height:118px; display:grid; place-items:center; font-family:'Fraunces',serif; font-size:28px; color:var(--gold);}
.zoom-tile.self.cam-off{background:#1A2436;}

@media(max-width:980px){
  .container{padding:26px 24px;}
  .top{padding:16px 24px;}
}
@media(max-width:850px){
  .login{padding:0;}
  .login-card{grid-template-columns:1fr; width:100%; border-left:none; border-right:none;}
  .login-right{padding:32px 28px 36px;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .tramite-layout{grid-template-columns:1fr;}
  .chatbot{position:static; max-height:480px; min-height:380px;}
  .form-grid,.doc-grid,.meta-grid,.mismatch{grid-template-columns:1fr;}
  .tramite-layout.wide{grid-template-columns:1fr;}
  .zoom-body{grid-template-columns:1fr;}
  .zoom-tile.self{position:static; width:100%; max-width:220px; margin-top:12px;}
  .zoom-tile.main{min-height:320px;}
}
@media(max-width:640px){
  .container{padding:20px;}
  .top{padding:14px 20px;}
  .protobadge{font-size:11px; padding:9px 16px; line-height:1.5;}
  .brand{font-size:16.5px;}
  .login-left{padding:32px 24px;}
  .login-right{padding:28px 24px 32px;}
  .nav{gap:8px; padding-bottom:12px;}
  .nav button{padding:7px 13px; font-size:13px;}
  .hero{flex-direction:column; align-items:stretch; gap:16px; margin-bottom:22px;}
  .hero .btn{width:100%;}
  .card{padding:18px;}
  .card.flush{padding:0;}
  .table{font-size:13px;}
  .table th,.table td{padding:11px 12px; white-space:nowrap;}
  .list-item{flex-wrap:wrap; padding:14px 16px;}
  .scroll-hint{display:block;}
  .pdf{padding:20px 18px;}
  .footer{padding:22px 20px;}
  .chatbot-form{flex-wrap:wrap;}
  .chatbot-form .btn{width:100%;}
  .btn-row .btn{width:100%;}
}
/* En móvil las tarjetas de resumen pasan a filas: ícono, texto y cifra en línea */
@media(max-width:560px){
  .grid,.grid.two{grid-template-columns:1fr; gap:12px;}
  .card.stat{display:grid; grid-template-columns:auto 1fr auto; column-gap:14px; align-items:center; padding:14px 16px;}
  .card.stat .ico{grid-row:1 / span 2;}
  .card.stat h3{grid-column:2; margin:0;}
  .card.stat .muted{grid-column:2; font-size:13px;}
  .card.stat .big{grid-column:3; grid-row:1 / span 2; font-size:26px;}
}
@media(max-width:420px){
  .userbox{font-size:12.5px; gap:10px;}
  .card .ico{width:32px; height:32px;}
  .card .ico-svg{width:18px; height:18px;}
}