/* Portal de clientes — Lexara Abogados. Un solo tema claro y sobrio (se ve igual en cualquier equipo, sin modo oscuro automático).
   Estructura: menú lateral verde institucional con el logo + contenido a pantalla completa. En celular el menú se abre con el botón ☰. */
:root{
  color-scheme: light;
  --verde:#004941; --verde-2:#003630; --turquesa:#52bbb5; --turquesa-suave:#e5f3f1; --turquesa-borde:#c8e3df;
  --ambar:#fbbc33; --ambar-suave:#fdf1d3; --ambar-texto:#7a5300;
  --ok:#1f7a4d; --ok-suave:#e3f3ea;
  --fondo:#f3f6f6; --tarjeta:#ffffff; --linea:#dfe7e5;
  --texto:#16302c; --suave:#5d706c; --rojo:#a3281c;
  --radio:12px; --sombra:0 1px 2px rgba(10,50,45,.06), 0 4px 14px rgba(10,50,45,.05);
  --ancho-lateral:248px;
  --font:'Aptos','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); background:var(--fondo); color:var(--texto); line-height:1.5}
[hidden]{display:none !important}
h1{font-size:1.6rem; margin:0; color:var(--verde); text-wrap:balance; letter-spacing:-.01em}
.suave{color:var(--suave); margin:0 0 1.1rem}
.info{background:var(--turquesa-suave); border:1px solid var(--turquesa-borde); padding:.65rem .85rem; border-radius:8px; margin:0 0 1rem; font-size:.92rem}
.error{color:var(--rojo); font-weight:600; margin:.8rem 0 0}
.demo{display:inline-block; background:var(--ambar-suave); color:var(--ambar-texto); border:1px solid #f0d58a; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.2rem .65rem; border-radius:99px; margin-bottom:.8rem}
.demo-codigo{background:var(--ambar-suave); color:var(--ambar-texto); border:1px dashed #d9a400; padding:.55rem .85rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem}
input[type=email],input[type=text],input[type=search],select{font:inherit; padding:.72rem .9rem; border:1px solid var(--linea); border-radius:10px; background:#fff; color:var(--texto); width:100%}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--turquesa); outline-offset:2px}

/* ---- ingreso ---- */
.login{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--tarjeta)}
.login-marca{background:linear-gradient(155deg,#eaf5f3 0%,#d3ebe7 100%); display:flex; flex-direction:column; justify-content:center; padding:3rem 3.5rem; border-right:1px solid var(--turquesa-borde)}
.login-logo{width:min(260px,70%); height:auto}
.login-lema{font-size:1.35rem; max-width:20ch; margin:1.8rem 0 0; color:var(--verde); font-weight:600; line-height:1.3}
.login-caja{display:flex; flex-direction:column; justify-content:center; padding:3rem; max-width:500px; width:100%; margin:0 auto}
.login-caja h1{margin-bottom:.35rem}
form{display:flex; flex-direction:column; gap:.55rem}
label{font-size:.82rem; font-weight:600; color:var(--suave)}
#codigo{letter-spacing:.5em; font-size:1.4rem; text-align:center}
.boton{font:inherit; font-weight:700; background:var(--verde); color:#fff; border:0; border-radius:10px; padding:.85rem 1rem; cursor:pointer; margin-top:.4rem}
.boton:hover{background:var(--verde-2)}
.boton:disabled{background:#9db1ad; cursor:default}
.boton-sec{font:inherit; font-weight:600; background:#fff; color:var(--verde); border:1px solid var(--linea); border-radius:10px; padding:.45rem .95rem; cursor:pointer}
.boton-sec:hover{border-color:var(--turquesa); background:var(--turquesa-suave)}
.enlace{font:inherit; background:none; border:0; color:var(--verde); text-decoration:underline; cursor:pointer; padding:.4rem 0; text-align:left}

/* ---- estructura: lateral fijo + contenido a todo el ancho ---- */
.app{min-height:100vh}
.lateral{position:fixed; inset:0 auto 0 0; width:var(--ancho-lateral); background:linear-gradient(180deg,var(--verde) 0%,var(--verde-2) 100%); color:#fff; display:flex; flex-direction:column; z-index:20}
.lateral-marca{padding:1.6rem 1.4rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.12)}
.lateral-marca img{width:150px; max-width:100%; height:auto; display:block}
.menu{display:flex; flex-direction:column; gap:.25rem; padding:1rem .8rem}
.menu button{font:inherit; font-weight:600; display:flex; align-items:center; gap:.75rem; background:none; border:0; color:rgba(255,255,255,.78); padding:.7rem .9rem; border-radius:10px; cursor:pointer; text-align:left}
.menu button:hover{background:rgba(255,255,255,.08); color:#fff}
.menu button[aria-selected=true]{background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 3px 0 0 var(--ambar)}
.menu-ico{width:1.3rem; text-align:center; font-size:1.05rem; opacity:.95}
.lateral-pie{margin-top:auto; padding:1rem 1.2rem 1.3rem; border-top:1px solid rgba(255,255,255,.12)}
.lateral-usuario{font-size:.85rem; color:rgba(255,255,255,.75); margin-bottom:.7rem; overflow-wrap:anywhere}
.boton-lateral{font:inherit; font-weight:600; width:100%; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:10px; padding:.55rem .9rem; cursor:pointer}
.boton-lateral:hover{background:rgba(255,255,255,.1)}
.principal{margin-left:var(--ancho-lateral); min-height:100vh; display:flex; flex-direction:column}
.contenido{flex:1; width:100%; padding:1.8rem clamp(1.2rem,3vw,2.8rem) 2rem}
.barra-movil{display:none}
.velo{display:none}
.franja-equipo{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; background:var(--turquesa-suave); border:1px solid var(--turquesa-borde); border-radius:10px; padding:.6rem .9rem; margin-bottom:1.1rem; font-size:.92rem; color:var(--verde)}
.cabecera{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--linea)}
.selector-cliente{display:flex; flex-direction:column; gap:.25rem; min-width:min(100%,340px)}
.herramientas{display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap}
.herramientas input{flex:1 1 300px; max-width:560px}
.herramientas select{width:auto}
.conteo{color:var(--suave); font-size:.9rem; margin-left:auto}

/* ---- tarjetas de proceso y de tutela: encabezado (qué es) + cuerpo (datos | estado) ---- */
.lista{display:flex; flex-direction:column; gap:.85rem}
.proceso{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden}
.p-cab{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; padding:.8rem 1.2rem; border-bottom:1px solid var(--linea); background:#fafcfc}
.rad{font-weight:700; font-size:1.02rem; color:var(--verde); font-variant-numeric:tabular-nums}
.cli{font-size:.78rem; color:var(--suave); text-transform:uppercase; letter-spacing:.05em}
.etapa{display:inline-block; background:var(--turquesa-suave); color:var(--verde); border:1px solid var(--turquesa-borde); font-size:.78rem; font-weight:600; padding:.15rem .7rem; border-radius:99px}
.p-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.p-cuerpo dl,.p-estado dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:.28rem 1rem; font-size:.9rem; align-content:start}
.p-cuerpo>dl{padding:1rem 1.2rem}
.p-cuerpo dt{color:var(--suave)}
.p-cuerpo dd{margin:0; overflow-wrap:anywhere}
.p-estado{padding:1rem 1.2rem; background:#f6faf9; border-left:1px solid var(--linea)}
.p-estado .fecha{display:block; font-size:.74rem; color:var(--suave); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; font-weight:600}
.p-estado .estado{font-size:.92rem; white-space:pre-line}
.insignia{display:inline-block; font-size:.8rem; font-weight:700; padding:.25rem .75rem; border-radius:99px}
.insignia.ok{background:var(--ok-suave); color:var(--ok)}
.insignia.pend{background:var(--ambar-suave); color:var(--ambar-texto)}
.vacio{text-align:center; color:var(--suave); padding:2rem 0}
.pie{text-align:center; color:var(--suave); font-size:.78rem; padding:1rem 1rem 1.6rem}

/* ---- resumen ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.8rem; margin-bottom:1rem}
.kpi{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:1.05rem 1.2rem}
.kpi-n{font-size:2.2rem; font-weight:700; color:var(--verde); line-height:1.1; font-variant-numeric:tabular-nums}
.kpi.ok .kpi-n{color:var(--ok)}
.kpi.pend .kpi-n{color:#b36b00}
.kpi-l{font-size:.85rem; color:var(--suave)}
.graficos{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:.85rem}
.grafico{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:1.1rem 1.25rem}
.grafico h3{margin:0 0 .8rem; font-size:.95rem; color:var(--verde)}
.barras{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.barras li{display:grid; grid-template-columns:minmax(110px,1.3fr) 2fr auto; align-items:center; gap:.7rem; font-size:.88rem}
.barra-nombre{overflow-wrap:anywhere}
.barra-pista{background:#edf3f2; border-radius:99px; height:10px; overflow:hidden}
.barra-relleno{display:block; height:100%; background:var(--turquesa); border-radius:99px}
.barra-n{font-variant-numeric:tabular-nums; font-weight:700; text-align:right; min-width:2ch}

/* ---- equipo Lexara: elegir cliente ---- */
.rejilla-clientes{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:.8rem}
.tarjeta-cliente{font:inherit; text-align:left; display:flex; flex-direction:column; gap:.2rem; background:var(--tarjeta); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:.95rem 1.05rem; cursor:pointer}
.tarjeta-cliente:hover{border-color:var(--turquesa); background:#fafefd}
.tarjeta-cliente.grupo{background:var(--turquesa-suave); border-color:var(--turquesa-borde)}
.tc-nombre{font-weight:700; color:var(--verde); overflow-wrap:anywhere}
.tc-tipo{font-size:.8rem; color:var(--suave)}

/* ---- tablet/celular: el menú lateral se abre con ☰; la misma información, apilada ---- */
@media (max-width:980px){
  .login{grid-template-columns:1fr}
  .login-marca{padding:1.6rem 1.4rem; border-right:0; border-bottom:1px solid var(--turquesa-borde)}
  .login-logo{width:160px}
  .login-lema{font-size:1.05rem; margin-top:.9rem}
  .login-caja{padding:1.6rem 1.4rem 2.4rem}

  .barra-movil{display:flex; align-items:center; gap:.8rem; position:sticky; top:0; z-index:15; padding:.55rem 1rem; background:#fff; border-bottom:1px solid var(--linea)}
  .barra-movil .barra-logo{height:30px; width:auto}
  .btn-menu{font:inherit; font-size:1.3rem; line-height:1; background:var(--verde); color:#fff; border:0; border-radius:10px; width:2.5rem; height:2.5rem; cursor:pointer}
  .lateral{transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 30px rgba(0,0,0,.25)}
  .app.menu-abierto .lateral{transform:none}
  .app.menu-abierto .velo{display:block; position:fixed; inset:0; background:rgba(10,30,28,.45); z-index:19}
  .principal{margin-left:0}
  .contenido{padding:1.2rem 1rem 1.6rem}
  .p-cuerpo{grid-template-columns:1fr}
  .p-estado{border-left:0; border-top:1px solid var(--linea)}
  .graficos{grid-template-columns:1fr}
  .barras li{grid-template-columns:1fr 1.4fr auto}
  .conteo{margin-left:0}
  .cabecera{align-items:stretch}
  .selector-cliente{min-width:100%}
}
@media (prefers-reduced-motion:reduce){ .lateral{transition:none} }
@media (prefers-reduced-motion:no-preference){ .boton,.boton-sec,.tarjeta-cliente,.menu button{transition:background .15s,border-color .15s} }

/* =====================  MÁS COLOR + reportes + «Ver más» (2026-11-11)  ===================== */
:root{ --azul:#2f7fb8; --azul-suave:#e4f0f8; --naranja:#ef7d00; --naranja-suave:#fdebd6; --rojo-suave:#fbe3e0; --gris-suave:#eceff0; --ok-fuerte:#1f7a4d; }

/* menú lateral: Inicio + íconos de color */
.menu-inicio{display:flex; align-items:center; gap:.75rem; margin:.9rem .8rem 0; padding:.65rem .9rem; border-radius:10px; color:#fff; text-decoration:none; font-weight:600; background:rgba(251,188,51,.16); border:1px solid rgba(251,188,51,.4)}
.menu-inicio:hover{background:rgba(251,188,51,.28)}
.menu-inicio .menu-ico{color:var(--ambar)}
.menu button[data-panel=procesos] .menu-ico{color:#7fd6d0}
.menu button[data-panel=resumen] .menu-ico{color:var(--ambar)}
.menu button[data-panel=tutelas] .menu-ico{color:#f4a259}
.boton-inicio-movil{margin-left:auto; text-decoration:none; padding:.4rem .8rem}
.volver-inicio{display:inline-block; margin-top:1.2rem; text-decoration:none; font-weight:600}

/* título con acento y encabezado de página más vivo */
.cabecera{border-bottom:2px solid var(--turquesa-borde)}
h1{background:linear-gradient(90deg,var(--verde) 0%,#0b7a6f 100%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* botones de reportes: Excel verde, PDF rojo (como en la app) */
.acciones-informe{display:flex; gap:.5rem; flex-wrap:wrap; margin-left:auto}
.btn-informe{font:inherit; font-size:.82rem; font-weight:700; border-radius:8px; padding:.42rem .85rem; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:.4rem}
.btn-informe::before{content:""; width:.75rem; height:.75rem; border-radius:3px; background:currentColor; opacity:.85}
.btn-informe.excel{background:#e3f3ea; color:#1d6b43; border-color:#bfe3cf}
.btn-informe.excel:hover:not(:disabled){background:#1d6b43; color:#fff}
.btn-informe.pdf{background:#fbe3e0; color:#a3281c; border-color:#f1c4bd}
.btn-informe.pdf:hover:not(:disabled){background:#a3281c; color:#fff}
.btn-informe:disabled{opacity:.55; cursor:default}
.herramientas.rango{gap:.7rem 1rem}
.campo-fecha{display:flex; align-items:center; gap:.45rem; font-weight:600; color:var(--suave)}
.campo-fecha input{width:auto; padding:.55rem .7rem}

/* tarjeta: encabezado de color según el semáforo del último estado */
.p-cab{align-items:flex-start}
.p-cab-der{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end}
.p-cab.verde{background:linear-gradient(90deg,#eaf6ef,#f8fcfa)} .p-cab.ambar{background:linear-gradient(90deg,#fdf3dc,#fffaf0)}
.p-cab.rojo{background:linear-gradient(90deg,#fbe9e6,#fffafa)} .p-cab.gris{background:linear-gradient(90deg,#eef1f2,#fafbfb)}
.sem{display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700; padding:.18rem .65rem; border-radius:99px}
.sem::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:currentColor}
.sem.verde{background:var(--ok-suave); color:var(--ok-fuerte)} .sem.ambar{background:var(--ambar-suave); color:var(--ambar-texto)}
.sem.rojo{background:var(--rojo-suave); color:#a3281c} .sem.gris{background:var(--gris-suave); color:#566}
.etapa{background:var(--azul-suave); color:#1d5f8c; border-color:#bcd9ec}
.etapa.tipo-tutela{background:var(--turquesa-suave); color:#0b6b63; border-color:var(--turquesa-borde)}
.etapa.tipo-impug{background:var(--naranja-suave); color:#a85600; border-color:#f3cfa3}
.etapa.tipo-otras{background:#efe9f8; color:#5a3f96; border-color:#d9cdee}
.insignia.mal{background:var(--rojo-suave); color:#a3281c}
.p-cuerpo dt{color:#6a7f7b; font-weight:600}
.p-estado{background:linear-gradient(180deg,#f2f9f8,#f8fbfb)}

/* pie de la tarjeta: reportes de ESTE proceso + «Ver más» */
.p-pie{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.65rem 1.2rem; border-top:1px solid var(--linea); background:#fcfdfd}
.p-pie-izq{display:flex; gap:.5rem; flex-wrap:wrap}
.btn-mas{font:inherit; font-weight:700; font-size:.88rem; color:#fff; background:var(--verde); border:0; border-radius:99px; padding:.45rem 1.1rem; cursor:pointer; margin-left:auto}
.btn-mas:hover{background:var(--verde-2)}

/* panel «Ver más»: trazabilidad, histórico y desistimientos */
.p-mas{border-top:2px solid var(--turquesa-borde); background:#f7fbfb; padding:1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:1.1rem}
.p-mas[hidden]{display:none}
.mas-sec h4{margin:0 0 .6rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:var(--verde); display:inline-block; padding:.25rem .8rem; border-radius:6px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.6rem}
.tile{background:#fff; border:1px solid var(--linea); border-top:3px solid var(--turquesa); border-radius:8px; padding:.55rem .8rem; display:flex; flex-direction:column; gap:.1rem}
.tile:nth-child(4n+2){border-top-color:var(--ambar)} .tile:nth-child(4n+3){border-top-color:var(--azul)} .tile:nth-child(4n+4){border-top-color:var(--naranja)}
.tile-l{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--suave); font-weight:600}
.tile-v{font-weight:600; overflow-wrap:anywhere}
.historico{white-space:pre-line; max-height:230px; overflow:auto; background:#fff; border:1px solid var(--linea); border-radius:8px; padding:.7rem .9rem; font-size:.9rem}
.tabla-caja{overflow-x:auto; border:1px solid var(--linea); border-radius:10px; background:#fff}
.tabla{width:100%; border-collapse:collapse; font-size:.88rem}
.tabla th{background:var(--verde); color:#fff; text-align:left; padding:.55rem .8rem; font-weight:700; white-space:nowrap}
.tabla td{padding:.55rem .8rem; border-top:1px solid var(--linea); vertical-align:top}
.tabla tbody tr:nth-child(even){background:#f6faf9}
.tabla .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* resumen: cifras con color */
.kpi{border-top:4px solid var(--verde)}
.kpi.azul{border-top-color:var(--azul); background:linear-gradient(180deg,var(--azul-suave),#fff)} .kpi.azul .kpi-n{color:var(--azul)}
.kpi.turquesa{border-top-color:var(--turquesa); background:linear-gradient(180deg,var(--turquesa-suave),#fff)} .kpi.turquesa .kpi-n{color:#0b7a6f}
.kpi.ok{border-top-color:var(--ok-fuerte); background:linear-gradient(180deg,var(--ok-suave),#fff)}
.kpi.pend{border-top-color:var(--naranja); background:linear-gradient(180deg,var(--naranja-suave),#fff)} .kpi.pend .kpi-n{color:#c46300}
.grafico h3{border-bottom:2px solid var(--turquesa-borde); padding-bottom:.4rem}

@media (max-width:980px){
  .acciones-informe{margin-left:0; width:100%}
  .p-pie{padding:.6rem 1rem} .p-mas{padding:.9rem 1rem 1rem}
  .btn-mas{margin-left:0; width:100%}
}

/* botón «Inicio» del ingreso: vuelve a www.lexaraabogados.com */
.login{position:relative}
.login-inicio{position:absolute; top:1.1rem; right:1.4rem; z-index:3; display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; font-weight:700; font-size:.92rem; color:var(--verde); background:#fff; border:1px solid var(--turquesa-borde); border-radius:99px; padding:.5rem 1.1rem; box-shadow:var(--sombra)}
.login-inicio span{color:#ef7d00; font-size:1.05rem}
.login-inicio:hover{background:var(--turquesa-suave); border-color:var(--turquesa)}

.menu-aldia{margin-top:.2rem; background:rgba(82,187,181,.16); border-color:rgba(82,187,181,.45)}
.menu-aldia .menu-ico{color:#7fd6d0}
.menu-aldia:hover{background:rgba(82,187,181,.28)}