/* ============================================================
   ESTRADO WEB · identidad visual (papel oficial, sobria)
   ============================================================ */
:root{
  /* Grises de texto: oscurecidos para que TODOS los temas superen el minimo de
     contraste 4.5:1 incluso sobre los fondos mas oscuros (pizarra). Se conservan
     dos niveles distinguibles: --gris para texto secundario y --gris2 para el
     terciario (contadores, folios, dias fuera del mes). */
  --tinta:#15181e; --tinta-suave:#3a3f48; --gris:#5b6067; --gris2:#666b74;
  --papel:#f3f1ec; --superficie:#fff; --superficie2:#faf9f6;
  --linea:#dbd6cc; --linea-suave:#e7e3da; --linea-fuerte:#c4bdae;
  --azul:#20344f; --azul-osc:#182a41; --azul-claro:#eef1f5;
  --vino:#7c2b2f; --vino-osc:#642125; --vino-claro:#f4eceb;
  --oro:#987a2c; --oro-claro:#f6efdf; --oro-borde:#e7d6a9;
  --ok:#2c6a45; --ok-bg:#e9f1ec; --alerta:#8f640f; --peligro:#a32b28; --peligro-bg:#f6e9e8;
  --serif:Georgia,'Palatino Linotype','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;

  /* v9.11 · VARIABLES DE FORMA (segundo eje del tema, independiente del color).
     Estos son los valores del estilo «documento», el de siempre: dejandolos aqui
     el sistema se ve exactamente igual que antes. El estilo «compacto» los
     sobrescribe desde estilo_usuario_css(). NO son colores: solo densidad,
     esquinas y tipografia de titulos. */
  --radio:4px;          /* esquinas de tarjetas y campos            */
  --radio-boton:20px;   /* botones e insignias (forma de pildora)   */
  --radio-chip:20px;    /* pills y chips                            */
  --densidad:1;         /* multiplica los espaciados: 1 = normal    */
  --fuente-tit:var(--serif);  /* tipografia de los titulos          */
  --lateral:236px;      /* ancho del menu lateral                   */
  --alto-boton:36px;    /* alto de botones e insignias              */
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--tinta);background:var(--papel)}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.2}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
.peq{font-size:12.5px}.gris{color:var(--gris)}.der{text-align:right}

/* ---- estructura ---- */
#app{display:flex;min-height:100vh}
#lateral{width:var(--lateral);flex:0 0 var(--lateral);background:var(--azul);color:#e8ecf1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marca{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.10);display:flex;gap:10px;align-items:center}
.logo-pl{width:34px;height:34px;border-radius:4px;background:var(--oro);color:var(--azul);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;flex:0 0 34px}
.marca-nombre{font-family:var(--serif);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.marca-sub{font-size:10px;color:#9fb0c4;letter-spacing:.05em}
.menu{padding:8px;flex:1;overflow:auto}
.menu .grupo{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7f93ab;padding:14px 10px 5px}
.menu .item{display:flex;align-items:center;gap:9px;padding:calc(8px*var(--densidad)) 10px;border-radius:var(--radio);color:#d4dce6;font-size:13.5px;margin:1px 0}
.menu .item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.menu .item.activo{background:#fff;color:var(--azul-osc);font-weight:600}
.menu .item .ic{width:16px;text-align:center;opacity:.85}
.menu .item.pronto{opacity:.45;cursor:default}
.pill-pronto{margin-left:auto;font-size:9.5px;background:rgba(255,255,255,.14);border-radius:20px;padding:1px 6px}
.lateral-pie{padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);font-size:12px}
.lateral-pie .sub{color:#9fb0c4}
.lateral-pie a{color:#e8ecf1;text-decoration:underline}
#principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{background:var(--superficie);border-bottom:1px solid var(--linea);height:calc(56px*var(--densidad));display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:20}
.barra-titulo{font-family:var(--serif);font-size:19px;font-weight:600}
/* v8.18 · Navegación dentro de la ventana de aplicación
   v8.22 · El botón pasó a vivir dentro de la línea de migas, así que es más
   pequeño y lleva un SVG en vez de un carácter. */
.btn-atras{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;
  margin-right:3px;border:1px solid var(--linea);border-radius:50%;background:var(--superficie);
  color:var(--gris);cursor:pointer;text-decoration:none;padding:0;line-height:1}
.btn-atras:hover{background:var(--azul-claro);color:var(--azul);border-color:#cdd8e4;text-decoration:none}
.btn-atras svg{display:block}
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);padding:9px 24px 0;max-width:1180px;width:100%;margin:0 auto}
.migas a{color:var(--azul);text-decoration:none}
.migas a:hover{text-decoration:underline}
.migas .sep{opacity:.45}
.migas .actual{color:var(--tinta-suave);font-weight:600}
@media (max-width:700px){.migas{padding:8px 14px 0}.btn-atras{margin-right:8px}}
.barra-acciones{margin-left:auto;display:flex;gap:10px;align-items:center}
.campana{position:relative;font-size:17px;text-decoration:none}
.campana:hover{text-decoration:none}
.campana-n{position:absolute;top:-6px;right:-9px;background:var(--vino);color:#fff;border-radius:20px;font-size:10px;padding:0 5px;font-family:var(--mono)}
.vista{padding:24px;max-width:1180px;width:100%;margin:0 auto}

/* ---- componentes ---- */
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:calc(18px*var(--densidad))}
.tarjeta .cab{padding:calc(12px*var(--densidad)) 16px;border-bottom:1px solid var(--linea-suave);display:flex;align-items:center;gap:10px}
.tarjeta .cab h2{font-size:16px;font-family:var(--fuente-tit)}
.tarjeta .cab .der-cab{margin-left:auto;display:flex;gap:8px;align-items:center}
.tarjeta .cuerpo{padding:calc(16px*var(--densidad))}
.tarjeta .cuerpo.sin-pad{padding:0}
.encabezado{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.encabezado .ceja{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);font-weight:700;margin-bottom:3px;font-family:var(--sans)}
.encabezado h1{font-size:24px}
.encabezado .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* Altura fija para que todos los botones midan igual; el ancho lo pone el texto.
   Dos tamaños en toda la aplicación: 36 px los de formulario, 26 px los chicos
   (que coinciden con .insignia y .pill, para que convivan en la misma fila). */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--alto-boton);line-height:1;padding:0 18px;border-radius:var(--radio-boton);border:1px solid var(--linea-fuerte);background:var(--superficie);color:var(--tinta);font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap;vertical-align:middle}
.boton:hover{border-color:var(--azul);text-decoration:none}
.boton.primario{background:var(--azul);border-color:var(--azul);color:#fff}
.boton.primario:hover{background:var(--azul-osc)}
.boton.peligro{color:var(--peligro);border-color:#e0c3c2}
.boton.peligro:hover{background:var(--peligro-bg)}
.boton.chico{height:26px;padding:0 14px;font-size:12.5px}

/* AUD/UI · Tarjeta-enlace: bloque de dos líneas (título + descripción) que abre una
   sección. NO usa .boton porque los botones tienen altura fija y no parten el texto,
   lo que aplastaba estas tarjetas. Aquí la altura la pone el contenido. */
.rejilla-enlaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tarjeta-enlace{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 15px;
  border:1px solid var(--linea-fuerte);border-radius:8px;background:var(--superficie);color:var(--tinta);
  text-decoration:none;line-height:1.4}
.tarjeta-enlace:hover{border-color:var(--azul);background:var(--azul-claro);text-decoration:none}
.tarjeta-enlace b{font-size:13.5px}
.tarjeta-enlace span{font-size:12.5px;color:var(--gris)}
.tarjeta-enlace:hover span{color:var(--azul)}

table.datos{width:100%;border-collapse:collapse;font-size:13.5px}
table.datos th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:700;padding:calc(9px*var(--densidad)) 14px;border-bottom:1px solid var(--linea);background:var(--superficie2)}
table.datos td{padding:calc(10px*var(--densidad)) 14px;border-bottom:1px solid var(--linea-suave);vertical-align:top}
table.datos tr.clic{cursor:pointer}
table.datos tr.clic:hover{background:var(--azul-claro)}
.vacio{padding:36px 16px;text-align:center;color:var(--gris)}
.vacio .grande{font-family:var(--serif);font-size:17px;color:var(--tinta-suave);margin-bottom:5px}

/* 26 px, la misma altura que .boton.chico, para que en una fila de acciones no
   quede ningún escalón. El ancho lo pone el texto. */
.insignia{display:inline-flex;align-items:center;justify-content:center;height:26px;line-height:1;vertical-align:middle;font-size:11.5px;font-weight:500;padding:0 14px;border-radius:var(--radio-chip);border:1px solid transparent;white-space:nowrap}
.insignia.azul{background:var(--azul-claro);color:var(--azul);border-color:#cdd8e4}
.insignia.oro{background:var(--oro-claro);color:var(--alerta);border-color:var(--oro-borde)}
.insignia.vino{background:var(--vino-claro);color:var(--vino-osc);border-color:#e4c9c8}
.insignia.verde{background:var(--ok-bg);color:var(--ok);border-color:#c3ddcd}
.insignia.grisb{background:#eee;color:#666;border-color:#ddd}
.pill{display:inline-flex;align-items:center;justify-content:center;height:26px;line-height:1;vertical-align:middle;font-size:11.5px;color:var(--gris);border:1px solid var(--linea);border-radius:var(--radio-chip);padding:0 13px;white-space:nowrap}

.aviso{padding:10px 14px;border-radius:4px;font-size:13.5px;margin-bottom:16px;border:1px solid}
.aviso.ok{background:var(--ok-bg);border-color:#c3ddcd;color:var(--ok)}
.aviso.err{background:var(--peligro-bg);border-color:#e0c3c2;color:var(--peligro)}
.aviso.alerta{background:var(--oro-claro);border-color:var(--oro-borde);color:var(--alerta)}
.aviso.info{background:var(--azul-claro);border-color:#cdd8e4;color:var(--azul-osc)}
.explorador{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;align-items:center;justify-content:center;padding:20px}
.exp-caja{background:var(--superficie);border-radius:8px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden}
.exp-cab{padding:12px 16px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.exp-ruta{font-family:monospace;font-size:12px;color:var(--gris);word-break:break-all;margin-top:3px}
.exp-cuerpo{overflow:auto;padding:6px;flex:1;min-height:120px}
.exp-item{padding:8px 12px;border-radius:4px;cursor:pointer;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-item:hover{background:var(--azul-claro)}
.exp-subir{color:var(--azul);font-weight:600}
.exp-cargando{padding:12px;color:var(--gris2);font-size:13px}
.exp-pie{padding:12px 16px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- formularios ---- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px 15px}
.form-grid .completo{grid-column:1/-1}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}#lateral{display:none}}
.campo label{display:block;font-size:12px;font-weight:600;color:var(--tinta-suave);margin-bottom:4px}
.campo label .req{color:var(--vino)}
.campo input,.campo select,.campo textarea{width:100%;padding:8px 10px;border:1px solid var(--linea-fuerte);border-radius:4px;font-size:13.5px;font-family:inherit;background:var(--superficie)}
.campo textarea{resize:vertical;min-height:70px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(32,52,79,.10)}
.campo .pista{font-size:11.5px;color:var(--gris);margin-top:3px}
.seccion{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--oro);font-weight:700;margin:4px 0 10px}
hr.regla{border:none;border-top:1px solid var(--linea);margin:18px 0}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros .campo{min-width:150px}
.linea-check{display:flex;align-items:center;gap:8px;font-size:13.5px}
.linea-check input{width:auto}

/* ---- lista de eventos (panel) ---- */
/* v9.23 · La linea divisoria pasa al envoltorio: el boton de la reunion virtual
   va FUERA del <a> (no se anidan enlaces) pero debe verse dentro de la fila. */
.evento-bloque{border-bottom:1px solid var(--linea-suave)}
.evento-bloque:last-child{border-bottom:0}
.evento{display:flex;gap:12px;align-items:flex-start;padding:11px 16px}
.ev-enlace{padding:0 16px 11px 66px}
.evento:last-child{border-bottom:none}
.evento .icono{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 30px;font-size:14px;border:1px solid}
/* Número de orden de la lista de próximos eventos (no es tabla, va como celda propia) */
.evento .ev-num{flex:0 0 16px;width:16px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--gris2);padding-top:7px}
.icono.aud{background:var(--azul-claro);color:var(--azul);border-color:#cdd8e4}
.icono.ter{background:var(--oro-claro);color:var(--alerta);border-color:var(--oro-borde)}
.icono.venc{background:var(--vino-claro);color:var(--vino-osc);border-color:#e4c9c8}
.icono.nota{background:var(--vino-claro);color:var(--vino-osc);border-color:#e4c9c8}
.icono.cita{background:var(--ok-bg);color:var(--ok);border-color:#c3ddcd}
.evento .fecha{font-family:var(--mono);font-size:12px;color:var(--azul);font-weight:600;white-space:nowrap}
.peligro-txt{color:var(--peligro);font-weight:600}
.alerta-txt{color:var(--alerta);font-weight:600}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.kpi{flex:1;min-width:150px;background:var(--superficie);border:1px solid var(--linea);border-top:3px solid var(--azul);border-radius:4px;padding:13px 15px}
.kpi.oro{border-top-color:var(--oro)}
.kpi.vino{border-top-color:var(--vino)}
.kpi.verde{border-top-color:var(--ok)}
.kpi .et{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:700}
.kpi .val{font-family:var(--serif);font-size:26px;margin-top:5px}
.kpi[href]{text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .12s,border-color .12s}
.kpi[href]:hover{border-color:var(--azul);box-shadow:0 1px 6px rgba(0,0,0,.10)}
/* Tarjeta pulsada: se marca para que se vea qué filtro está aplicado abajo */
.kpi.activo{border-width:2px;border-color:var(--azul)}
.kpi.vino.activo{border-color:var(--vino)}
.kpi.oro.activo{border-color:var(--oro)}
.kpi.vino.activo .et{color:var(--vino)}
.kpi.oro.activo .et{color:var(--alerta)}
/* Franja del panel: el filtro no arrojó nada y se muestra la lista completa */
.aviso-filtro{background:var(--ok-bg);border-bottom:1px solid var(--linea-suave);color:var(--ok);
  font-size:12.5px;padding:11px 16px}

/* ---- login ---- */
.login-fondo{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--azul)}
.login-caja{background:var(--superficie);border-radius:6px;padding:32px;width:100%;max-width:380px;border-top:4px solid var(--oro)}

/* ---- pestañas de la ficha del proceso ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px;flex-wrap:wrap}
.tab{padding:9px 15px;font-size:13.5px;color:var(--gris);border:1px solid transparent;border-bottom:none;margin-bottom:-1px;border-radius:4px 4px 0 0;text-decoration:none}
.tab:hover{color:var(--azul);text-decoration:none}
.tab.activa{background:var(--superficie);border-color:var(--linea);color:var(--azul);font-weight:600}
.tab-n{font-family:var(--mono);font-size:11px;color:var(--gris2);margin-left:5px}
.evento.resaltada{background:var(--oro-claro);outline:2px solid var(--oro-borde)}

/* ---- Etapa 2: ficha del proceso ---- */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin:16px 0 0;flex-wrap:wrap}
.pestana{padding:9px 15px;font-size:13.5px;color:var(--gris);border:1px solid transparent;border-bottom:none;margin-bottom:-1px;border-radius:4px 4px 0 0;text-decoration:none}
.pestana:hover{color:var(--azul);text-decoration:none}
.pestana.activa{background:var(--papel);border-color:var(--linea);color:var(--azul);font-weight:600}
.pestana .n{font-family:var(--mono);font-size:11px;color:var(--gris2);margin-left:5px}
.lt{position:relative;margin-left:6px;padding-left:26px}
.lt:before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--linea)}
.lt-item{position:relative;padding:0 0 18px}
.lt-item:last-child{padding-bottom:4px}
.lt-punto{position:absolute;left:-26px;top:4px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--azul)}
.lt-punto.pend{background:var(--oro-claro);border-color:var(--alerta)}
.resaltada{background:var(--oro-claro);outline:2px solid var(--oro-borde);border-radius:4px;padding:8px;margin:-8px -8px 10px}
.concepto-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.concepto-kpis>div{flex:1;min-width:130px}
.concepto-kpis .et{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);font-weight:700}
.concepto-kpis .val{font-family:var(--serif);font-size:18px;margin-top:3px}

/* ---- Etapa 3: adjuntos y visor integrado ---- */
.chips-adjuntos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
/* Un archivo y su botón de eliminar, siempre juntos. */
.chip-par{display:inline-flex;align-items:center;gap:6px}
.chip-adjunto{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--linea-fuerte);border-radius:4px;padding:5px 10px;background:var(--superficie);cursor:pointer;max-width:280px}
.chip-adjunto:hover{border-color:var(--azul);background:var(--azul-claro)}
.chip-adjunto .chip-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-adjunto .chip-vinculo{color:var(--oro);font-size:11px}
.chip-borrar{display:inline}
.chip-borrar button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e0c3c2;background:var(--superficie);color:var(--peligro);border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1}
.form-adjunto{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.form-adjunto input[type=file]{font-size:12px;max-width:230px}
.visor-fondo{position:fixed;inset:0;background:rgba(21,24,30,.78);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.visor-caja{background:var(--papel);border-radius:6px;width:min(960px,96vw);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;border-top:4px solid var(--oro)}
.visor-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--azul);color:#e8ecf1}
.visor-cab .nombre{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.visor-cab a,.visor-cab button{font-size:12px;padding:5px 10px;border-radius:4px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.visor-cuerpo{flex:1;background:#3a3f48;display:flex;align-items:center;justify-content:center;overflow:auto}
.visor-cuerpo iframe{width:100%;height:100%;border:none;background:#fff}
.visor-cuerpo img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- Impresión (informes y listados) ---- */
@media print{
  #lateral,.barra,.filtros,.acciones,.no-imprimir,.boton,.chip-borrar,.form-adjunto{display:none!important}
  body{background:#fff;font-size:12px}
  .vista{padding:0;max-width:none}
  .tarjeta{border:1px solid #999;break-inside:avoid}
  .insignia{border:1px solid #999;background:#fff!important;color:#000!important}
  a{color:#000;text-decoration:none}
}

/* ---- Etapa 4: insignia de solicitudes en el menú ---- */
.menu-badge{margin-left:auto;background:var(--vino);color:#fff;border-radius:20px;font-size:10.5px;font-family:var(--mono);padding:1px 7px;font-weight:700}
.menu .item.activo .menu-badge{background:var(--vino);color:#fff}
details>summary.boton{display:inline-flex}
details>summary::-webkit-details-marker{display:none}

/* ---- Etapa 5: vista externa de solo consulta ---- */
.solo-lectura form[method="post"], .solo-lectura form:not([method]){display:none!important}
.banda-externa{background:var(--oro-claro);border-bottom:1px solid var(--oro-borde);color:var(--alerta);
  font-size:12.5px;font-weight:600;padding:8px 22px;letter-spacing:.02em}

/* ---- Etapa 6: portal de clientes ---- */
.portal{background:var(--papel);min-height:100vh;display:flex;flex-direction:column}
.portal-barra{background:var(--azul);color:#e8ecf1;padding:12px 22px;display:flex;gap:12px;align-items:center;border-bottom:3px solid var(--oro)}
.portal-cuerpo{max-width:860px;width:100%;margin:0 auto;padding:22px 18px;flex:1}
/* v9.0 · Solicitud de documentos por correo desde el portal */
.sol-form{margin-top:9px}
.sol-nota{font-size:12px;color:var(--gris);margin-top:4px}
.sol-estado{display:inline-flex;align-items:flex-start;gap:7px;margin-top:9px;padding:7px 12px;
  border-radius:5px;font-size:12.5px;line-height:1.35}
.sol-estado.espera{background:var(--oro-claro);border:1px solid var(--oro-borde);color:#6d5717}
.sol-estado.listo{background:#e9f2ec;border:1px solid #c6ded0;color:#2f6b46}
.sol-estado.falla{background:#f6e9eb;border:1px solid #e5c9ce;color:var(--vino)}
.chip-adjunto.chip-doc{opacity:.75;cursor:default}
/* v9.2 · Envío conjunto de documentos */
.frm-enlace{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;align-items:center}
.frm-enlace input[type=url]{flex:1;min-width:190px;padding:5px 8px;border:1px solid var(--linea-fuerte);
  border-radius:4px;font-size:11.5px;font-family:var(--mono)}
.sol-marcar{display:inline-flex;align-items:center;gap:7px;margin-top:9px;margin-right:12px;
  font-size:12.5px;color:var(--tinta-suave);cursor:pointer}
.sol-marcar input{width:16px;height:16px;flex:0 0 16px}
.barra-envio{position:sticky;bottom:0;z-index:30;background:var(--superficie);
  border-top:2px solid var(--azul);padding:11px 18px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;box-shadow:0 -3px 12px rgba(0,0,0,.07);margin:0 -18px -22px}
.barra-envio .cuenta-nota{font-size:12.5px;color:var(--gris)}
.barra-envio .cuenta-nota b{color:var(--tinta)}
.chip.carpeta,.chip-adjunto.carpeta{border-color:var(--oro-borde);background:var(--oro-claro);color:#6d5717}
/* v8.18 · Rastro de navegación del portal (el cliente lo instala como app) */
.portal-migas{background:var(--superficie2);border-bottom:1px solid var(--linea-suave);
  padding:9px 22px;font-size:12.5px;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.portal-migas a{color:var(--azul);text-decoration:none}
.portal-migas a:hover{text-decoration:underline}
.portal-migas .sep{opacity:.45}
.portal-migas .actual{color:var(--tinta-suave);font-weight:600}
.portal-migas .btn-atras{margin-right:4px}
@media (max-width:700px){.portal-migas{padding:8px 14px}}
.portal-pie{background:var(--superficie2);border-top:1px solid var(--linea);padding:14px 22px;font-size:12px;color:var(--gris)}
.clic-tarjeta{transition:border-color .12s}
.clic-tarjeta:hover{border-color:var(--azul);text-decoration:none}
.portal h1{font-family:var(--serif)}

/* ============================================================
   v5.6 · Buscador global, calculadora de términos y saldos
   ============================================================ */
.barra-acciones{display:flex;align-items:center;gap:14px}
.busca-top{margin:0}
.busca-top input{width:250px;max-width:40vw;padding:7px 12px;border:1px solid var(--linea-fuerte);
  border-radius:20px;font-size:13px;font-family:inherit;background:var(--superficie);color:var(--tinta)}
.busca-top input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(32,52,79,.10)}
.busca-grupo{margin-bottom:18px}
.busca-grupo h3{font-family:var(--serif);font-size:15px;color:var(--azul);margin:0 0 6px;
  padding-bottom:5px;border-bottom:1px solid var(--linea)}
.busca-grupo .cuenta{font-size:11px;color:var(--gris);font-weight:600}
mark{background:var(--oro-claro);color:inherit;padding:0 1px;border-radius:2px}
/* Calculadora de términos en días hábiles (dentro del formulario de actuación) */
.calc-termino{background:var(--superficie2);border:1px solid var(--linea);border-radius:4px;
  padding:10px 12px;margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.calc-termino .campo{margin:0}
.calc-termino input{width:130px}
.calc-termino .campo.chico input{width:90px}
.calc-nota{font-size:11.5px;color:var(--gris);flex-basis:100%;margin-top:2px}
/* Saldo y abonos */
.saldo-cifras{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.saldo-cifra{flex:1;min-width:160px;background:var(--superficie);border:1px solid var(--linea);
  border-top:3px solid var(--azul);border-radius:4px;padding:12px 14px}
.saldo-cifra .rot{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);font-weight:700}
.saldo-cifra .val{font-family:var(--mono);font-size:18px;color:var(--tinta);margin-top:3px}
.saldo-cifra.liq{border-top-color:var(--oro)}

/* ============================================================
   v5.6 · Calendario mensual
   ============================================================ */
.cal-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cal-titulo{font-family:var(--serif);font-size:20px;color:var(--azul);text-transform:capitalize;margin:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
.cal-dow{background:var(--superficie2);padding:6px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);text-align:center}
.cal-dia{background:var(--superficie);min-height:98px;padding:4px 5px;font-size:12px;vertical-align:top;min-width:0}
.cal-dia.fuera{background:var(--superficie2)}
.cal-dia.fuera .num{color:var(--gris2)}
.cal-dia.festivo{background:#e9f1fb}
.cal-dia.hoy .num{background:var(--azul);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px}
.cal-dia .num{font-weight:700;font-size:12px;color:var(--tinta);margin-bottom:2px}
.cal-ev{display:block;font-size:10.5px;line-height:1.35;border-radius:3px;padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.cal-ev.venc{background:var(--oro-claro);color:var(--tinta)}
.cal-ev.aud{background:var(--azul-claro);color:var(--azul-osc)}
.cal-ev.cita{background:var(--ok-bg);color:var(--ok)}
.cal-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--gris);margin-top:10px}
.cal-leyenda span{display:inline-flex;align-items:center;gap:5px}
.cal-punto{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ---- Línea de actuaciones (vista del personal) --------------------------
   Sin línea de tiempo vertical: cada actuación se separa con una línea
   horizontal y aire. Las clases .lt / .lt-item / .lt-punto NO se tocan aquí:
   las usa el portal del cliente, que conserva su línea de tiempo. */
.ax-lista{--ax-pad:9px}  /* v8.12 · era 26px: versión apretada */
.ax{display:grid;grid-template-columns:34px 1fr;gap:18px;
    padding:var(--ax-pad) 0;border-top:1px solid var(--linea)}
.ax:first-child{border-top:0;padding-top:6px}
.ax:last-child{padding-bottom:6px}

/* Número de la actuación: se calcula por su posición, no se guarda. */
.ax-num{font-family:var(--mono);font-size:15px;color:var(--azul);font-weight:600;
        text-align:right;line-height:1.5;-webkit-user-select:none;user-select:none}

.ax-alto{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.ax-fecha{font-family:var(--mono);font-size:13px;color:var(--gris)}
.ax-folio{font-family:var(--mono);font-size:12px;color:var(--gris2)}
.ax-crece{flex:1}
/* v8.12 · El tipo va en la línea de la fecha, en negrita para seguir leyéndose primero. */
.ax-tipo{font-family:var(--serif);font-size:15.5px;line-height:1.3;font-weight:700;color:var(--tinta)}
.ax-desc{font-size:13.5px;color:var(--tinta-suave);line-height:1.45;margin:0;white-space:pre-wrap}
.ax-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:5px;font-size:12.5px;color:var(--gris)}

/* v8.12 · Los archivos bajan al pie de la actuación, alineados a la izquierda.
   Antes iban en una columna a la derecha (.ax-fila, ya retirada del marcado):
   al liberar ese ancho, las acciones caben en una sola línea arriba y en el
   celular el orden de lectura queda natural sin necesidad de media queries. */
.ax-arch{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.ax-arch .chips-adjuntos{margin-top:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
.ax-arch .chip-adjunto{max-width:340px}
.ax-arch .form-adjuntar{margin:0}

/* Acciones: discretas, arriba a la derecha. */
.ax-acciones{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ax-acc{background:none;border:1px solid transparent;color:var(--gris2);font-size:12.5px;
        padding:3px 8px;border-radius:4px;cursor:pointer;text-decoration:none;font-family:var(--sans)}
.ax-acc:hover{background:var(--azul-claro);color:var(--azul);border-color:#cdd8e4;text-decoration:none}
.ax-acc.peligro:hover{background:var(--peligro-bg);color:var(--peligro);border-color:#e0c3c2}

/* v9.39 · Menú de acciones de la actuación. Antes las seis iban sueltas en la
   fila; ahora solo «Editar» queda a la vista y el resto vive aquí. El menú se
   posiciona respecto de .ax-acciones, que por eso pasa a position:relative. */
.ax-acciones{position:relative}
.ax-mas{font-weight:700;letter-spacing:1px;line-height:1}
.ax-menu{position:absolute;right:0;top:100%;z-index:30;min-width:200px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);padding:5px;text-align:left}
.ax-menu[hidden]{display:none}
.ax-menu form{display:block;margin:0}
/* v9.54 · El menu se veia amontonado: estas reglas daban formato solo a los
   <button>, y los <a> quedaban en linea pegados unos a otros. Ahora las dos
   cosas se ven igual y cada accion ocupa su renglon. */
.ax-menu a,
.ax-menu button{display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;background:none;border:0;text-decoration:none;
  padding:7px 10px;font-size:12.5px;font-family:var(--sans);color:var(--tinta-suave);
  border-radius:4px;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.ax-menu a:hover,
.ax-menu button:hover{background:var(--azul-claro);color:var(--azul)}
.ax-menu button.peligro{color:var(--peligro)}
.ax-menu button.peligro:hover{background:var(--peligro-bg)}
/* El icono en columna fija, para que los textos empiecen a la misma altura. */
.ax-menu .ax-ic{width:16px;flex:0 0 16px;text-align:center}
/* Una linea fina agrupa lo que va junto. */
.ax-menu .ax-sep{height:1px;background:var(--linea-suave);margin:5px 8px}
/* El contador de documentos, alineado a la derecha. */
.ax-menu .ax-nota{margin-left:auto;font-size:11.5px;color:var(--gris)}

/* v8.12 · En pantallas angostas las acciones bajan a su propio renglón. */
@media (max-width:820px){
  .ax-crece{flex:0 0 100%}
  .ax-acciones{width:100%;margin-top:2px}
}

/* ---- Adjuntar en un paso: el selector de archivo va oculto dentro del botón ---- */
.form-adjuntar{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.adj-boton{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:26px;line-height:1;font-size:12.5px;color:var(--gris);
           border:1px dashed var(--linea-fuerte);border-radius:20px;padding:0 14px;cursor:pointer;background:none;white-space:nowrap;vertical-align:middle}
.adj-boton:hover{border-color:var(--azul);color:var(--azul);border-style:solid;background:var(--azul-claro)}
/* "Vincular" es la opción principal: borde sólido y color de la casa. */
.adj-boton.principal{border-style:solid;border-color:var(--linea-fuerte);color:var(--azul);font-weight:600}
.adj-boton.principal:hover{border-color:var(--azul);background:var(--azul-claro)}
.adj-boton.subiendo{opacity:.6;cursor:progress;animation:adj-pulso 1s ease-in-out infinite}
.adj-cont{font-size:11.5px;color:var(--gris2)}
@keyframes adj-pulso{50%{opacity:.35}}

/* ---- Versículo al pie de la pantalla de ingreso (Reina-Valera 1909) ---- */
.login-vers{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea-suave);text-align:center}
.login-vers-txt{font-family:var(--serif);font-size:12.5px;line-height:1.6;color:var(--gris);font-style:italic}
.login-vers-cita{font-size:11px;color:var(--gris2);margin-top:6px;letter-spacing:.04em}

/* ---- v8.6 · Portal: tabla de procesos. En pantallas angostas se esconden el
   título del proceso y la columna del juzgado, y lo que sobre se desliza de lado ---- */
.tabla-desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-desliza>.tabla-portal{min-width:680px}
@media (max-width:680px){
  .tabla-desliza>.tabla-portal{min-width:420px}
  .tabla-portal .col-juzgado,.tabla-portal .col-titulo{display:none}
}

/* ---- v8.12 · Campo buscable: reemplaza los desplegables largos (cliente,
   contraparte) por un cuadro de texto que filtra la lista al escribir ---- */
.campo.buscable{position:relative}
/* v8.16 · Fichas de los responsables de una tarea */
.multi-resp .fichas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.ficha{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 12px;border-radius:20px;
  background:var(--azul-claro);color:var(--azul);border:1px solid #cdd8e4;font-size:12.5px}
.ficha.principal{background:#e4ebf3;font-weight:600}
.ficha .marca{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;font-weight:400}
.ficha .x{border:0;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 4px;opacity:.65;font-family:inherit}
.ficha .x:hover{opacity:1}
/* v8.15 · El componente también se usa fuera de un .campo (pestaña Partes), así
   que se posiciona y se estila por sí mismo, y lleva una flecha para que se siga
   viendo como una lista y no como un texto suelto. */
.buscable{position:relative}
.buscable .buscable-txt{width:100%;padding:8px 28px 8px 10px;border:1px solid var(--linea-fuerte);border-radius:4px;font-size:13.5px;font-family:inherit;background:var(--superficie)}
.buscable .buscable-txt:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(32,52,79,.10)}
.buscable .buscable-txt{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666b74' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.buscable-lista{position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:2px;
  background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);max-height:260px;overflow-y:auto}
.buscable-op{padding:7px 11px;font-size:13px;cursor:pointer;color:var(--tinta-suave);overflow-wrap:anywhere;line-height:1.35}
.buscable-op:hover,.buscable-op.activa{background:var(--azul-claro);color:var(--azul)}
.buscable-op.vacia{color:var(--gris2);cursor:default}
.buscable-op.vacia:hover{background:none;color:var(--gris2)}

/* ---- v8.12 · Ficha de carpeta vinculada: se distingue del archivo suelto ---- */
.chip-carpeta{border-style:dashed}

/* ============================================================
   v9.3 · Enlaces utilizables
   El enlace se acorta para que una direccion larga (Teams, Meet)
   no se coma tres renglones de la linea de actuaciones. La
   direccion completa va en el atributo title.
   ============================================================ */
.enl{white-space:nowrap}
.enl .ic{font-size:11px;opacity:.75;margin-left:2px}

/* Boton de la audiencia virtual: en oro, para que se distinga de los
   chips de archivos que lo acompanan en el mismo renglon. */
.enl-bot{display:inline-flex;align-items:center;gap:6px;background:var(--oro-claro);
         border:1px solid var(--oro-borde);color:#6d5719;border-radius:999px;
         padding:3px 12px;font-size:12.5px;text-decoration:none;max-width:100%}
.enl-bot:hover{background:#f1e6cc;text-decoration:none}

/* ============================================================
   v9.4 · Acciones de la pantalla de documentos
   Se agrupan por ACCION (descargar / enviar) y no por alcance,
   para que se lea de un vistazo que son dos vias paralelas.
   ============================================================ */
.acciones-doc{margin-top:14px}
.acc-fila{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:9px 0}
.acc-fila + .acc-fila{border-top:1px solid var(--linea-suave)}
.acc-et{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris2);
        width:112px;flex:0 0 112px}
@media(max-width:620px){.acc-et{width:100%;flex:1 0 100%;margin-bottom:1px}}

/* Boton en oro: distingue la descarga del envio por correo, que va en azul. */
/* v9.40 · REGLA DEL COLOR. Para que las próximas entregas no lo dispersen:
     · primario (azul) → la acción principal de la pantalla. Una por pantalla.
     · oro              → acciones que SALEN del sistema: crear la reunión en
                          Zoom, reenviar un correo, descargar archivos. Avisan de
                          que algo se va a mandar o a bajar al computador.
     · peligro          → borrar o archivar.
     · normal           → todo lo demás, incluidas las creaciones internas.
     · chico            → dentro de tablas y tarjetas. Normal, para lo principal.
   Antes el oro marcaba también «Nueva cita» y «Nueva tarea» del calendario, que
   son creaciones internas corrientes, y por eso el color no significaba nada. */
.boton.oro{background:var(--oro-claro);border-color:var(--oro-borde);color:#6d5719}
.boton.oro:hover{background:#f1e6cc;border-color:var(--oro)}

/* v9.5 · Segundo campo dentro de la misma celda de la rejilla (Lugar + enlace
   de la audiencia). La linea fina los separa para que se lean como campos
   distintos aunque compartan celda. */
.sub-campo{border-top:1px solid var(--linea-suave);margin-top:11px;padding-top:11px}

/* v9.8 · Icono de reunion virtual en el calendario. Va al lado del evento y no
   dentro de el: un <a> anidado en otro <a> es HTML invalido. */
.cal-linea{display:flex;align-items:flex-start;gap:3px}
.cal-linea .cal-ev{flex:1;min-width:0}
.cal-virtual{flex:0 0 auto;font-size:11px;line-height:1.5;text-decoration:none;
             padding:0 2px;border-radius:3px;background:var(--oro-claro);
             border:1px solid var(--oro-borde)}
.cal-virtual:hover{background:#f1e6cc;text-decoration:none}

/* v9.10 · «Mis pendientes» del portal: citas y audiencias proximas. El bloque de
   fecha a la izquierda se lee de un vistazo en el celular, que es donde el
   cliente abre el portal la mayoria de las veces. */
.pend{display:flex;gap:13px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid var(--linea-suave)}
.pend:last-child{border-bottom:0}
.pend-fecha{flex:0 0 62px;text-align:center;border:1px solid var(--linea);border-radius:5px;
            padding:5px 3px;background:var(--superficie2)}
.pend-fecha .d{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--azul);line-height:1}
.pend-fecha .m{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris2);margin-top:2px}
.pend-cuerpo{flex:1;min-width:0}
.pend-tit{font-weight:600;font-size:14px}
.pend-sub{font-size:12.5px;color:var(--gris);margin-top:2px}

/* v9.12 · Franja de «hay version nueva». Va abajo y por encima de todo, pero sin
   tapar el contenido ni bloquear nada: el usuario decide cuando recargar. */
.aviso-version{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:200;
  display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);
  background:var(--azul);color:#fff;border-radius:var(--radio-boton);
  padding:9px 10px 9px 16px;font-size:13px;box-shadow:0 6px 20px rgba(20,25,35,.28)}
.aviso-version b{color:var(--oro-borde)}
.aviso-version .boton{background:#fff;border-color:#fff;color:var(--azul);flex:0 0 auto}
.aviso-version .boton:hover{background:var(--oro-claro);border-color:var(--oro-claro)}
@media (max-width:520px){.aviso-version{font-size:12.5px;padding:8px 8px 8px 13px;gap:9px}}

/* ============================================================
   v9.16 · ESTILO ESCRITORIO
   Tres elementos que solo existen en este estilo. Se pintan
   unicamente cuando el usuario lo eligio en «Mi cuenta»; las
   demas pantallas y los otros estilos no se enteran.
   ============================================================ */

/* Barra de herramientas: reemplaza la barra de titulo. Los iconos van encima
   del texto, como en un programa de gestion de escritorio. */
.barra-herr{display:flex;align-items:center;gap:2px;padding:3px 6px;position:sticky;top:0;z-index:20;
  background:linear-gradient(#fafbfc,#eef0f3);border-bottom:1px solid var(--linea)}
.barra-herr .herr{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 9px;
  border:1px solid transparent;border-radius:2px;font-size:10px;color:var(--tinta-suave);
  text-decoration:none;white-space:nowrap;min-width:46px}
.barra-herr .herr:hover{background:#fff;border-color:var(--linea);text-decoration:none}
.barra-herr .herr .g{font-size:15px;line-height:1}
.barra-herr .herr-sep{width:1px;align-self:stretch;background:var(--linea);margin:4px 5px}
.barra-herr .herr-busca{margin-left:auto}
.barra-herr .herr-busca input{border:1px solid var(--linea-fuerte);border-radius:2px;padding:4px 9px;
  font-size:12px;font-family:inherit;background:#fff;width:230px}
.barra-herr .campana{margin-left:8px}
/* Con barra de herramientas, la del titulo estorba: el titulo ya esta en las
   migas o en el encabezado de la pantalla. */
.barra-oculta{display:none}

/* Pestañas planas. Solo se pintan donde la pantalla declara filtros reales. */
.pestanas-esc{display:flex;gap:0;padding:0 9px;background:var(--papel);border-bottom:1px solid var(--linea)}
.pestanas-esc .pest{padding:5px 14px;font-size:12px;border:1px solid transparent;border-bottom:0;
  color:var(--gris);text-decoration:none;margin-top:4px}
.pestanas-esc .pest:hover{color:var(--tinta);text-decoration:none}
.pestanas-esc .pest.on{background:var(--superficie);border-color:var(--linea);color:var(--tinta);
  font-weight:600;border-radius:2px 2px 0 0;margin-bottom:-1px}

/* Barra de estado, abajo del todo. */
.barra-estado{display:flex;gap:12px;align-items:center;padding:4px 12px;font-size:11px;color:var(--gris);
  background:linear-gradient(#fafbfc,#eef0f3);border-top:1px solid var(--linea);
  position:sticky;bottom:0;z-index:15}
.barra-estado .est-sep{width:1px;height:11px;background:var(--linea)}
.barra-estado .est-der{margin-left:auto;display:flex;gap:6px;align-items:center}
.barra-estado .est-punto{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 7px}
.barra-estado .est-punto.web{background:var(--oro)}

/* Tabla con filas alternas y encabezado en relieve: es lo que mas cambia la
   sensacion de «programa» frente a «pagina web». Solo con este estilo. */
body.esc table.datos tbody tr:nth-child(even) td,
body.esc table.datos tr:nth-child(even) td{background:#f7f8fa}
body.esc table.datos tr:hover td{background:#eef3f9}
body.esc table.datos th{background:linear-gradient(#fafbfc,#eef0f3);border-right:1px solid var(--linea-suave)}
@media (max-width:700px){
  .barra-herr .herr-busca input{width:120px}
  .barra-herr .herr{min-width:38px;padding:4px 6px}
}

/* v9.19 · Aviso de instalacion vacia. Deliberadamente llamativo y pegado arriba:
   su unica razon de existir es que nadie registre datos en un servidor
   equivocado. Desaparece solo en cuanto hay procesos o clientes. */
.aviso-vacia{position:sticky;top:0;z-index:40;background:var(--peligro);color:#fff;
  padding:10px 18px;font-size:13px;line-height:1.5;border-bottom:2px solid #7a1f1c}
.aviso-vacia b{color:#ffe9e7}
.aviso-vacia .peq{display:block;margin-top:3px;font-size:11.5px;opacity:.85}

/* v9.21 · Crear tarea desde una actuacion. El panel se despliega bajo la
   actuacion, no en una ventana aparte, para que se vea de cual salio. */
.tarea-panel{margin-top:11px;border:1px solid var(--oro-borde);border-radius:var(--radio);
  background:#fffdf7;overflow:hidden}
.tarea-panel .tp-cab{background:var(--oro-claro);padding:8px 13px;font-size:12.5px;
  font-weight:600;color:#6d5719;display:flex;align-items:center;gap:8px}
.tarea-panel .tp-x{margin-left:auto;background:none;border:0;color:#8a6d1c;cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px;font-family:inherit}
.tarea-panel .tp-cuerpo{padding:13px}
.tarea-panel .tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 13px}
.tarea-panel .tp-grid .completo{grid-column:1/-1}
.tarea-panel .tp-desc{max-height:52px;overflow:hidden;resize:none;transition:max-height .15s}
.tarea-panel .tp-desc.tp-desc-abierta{max-height:220px;overflow:auto;resize:vertical}
.tarea-panel .tp-mas{font-size:11.5px;color:var(--azul);cursor:pointer;margin-top:3px;display:inline-block}
.tarea-panel .tp-mas:hover{text-decoration:underline}
/* Marca de tareas pendientes en la actuacion. */
.tarea-marca{background:var(--oro-claro);border-color:var(--oro-borde);color:#6d5719;
  text-decoration:none;white-space:nowrap}
.tarea-marca:hover{background:#f0e4c4;text-decoration:none}
@media (max-width:640px){.tarea-panel .tp-grid{grid-template-columns:1fr}}
/* Gancho de JavaScript del boton «Crear tarea»: el aspecto lo da .boton.chico,
   pero se declara para dejar constancia de que la clase existe a proposito. */
.tarea-btn{margin-top:6px}

/* ============================================================
   v9.23 · Crear citas y tareas desde el calendario
   ============================================================ */

/* El «+» de cada casilla: aparece al pasar el raton. En pantallas tactiles no
   hay «pasar el raton», asi que ahi se muestra siempre (mas abajo). */
.cal-dia{position:relative}
.cal-mas{position:absolute;top:3px;right:4px;width:18px;height:18px;border:0;border-radius:3px;
  background:var(--azul);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0;
  opacity:0;transition:opacity .12s;font-family:inherit}
.cal-dia:hover .cal-mas{opacity:1}
.cal-mas:focus{opacity:1;outline:2px solid var(--oro)}
@media (hover:none){.cal-mas{opacity:.45}}

/* Evento de tipo tarea, con su color propio. */
.cal-ev.tarea{background:#f0e8f2}
/* El boton «Ver tareas» encendido. */
.boton.activo-tareas{background:#f0e8f2;border-color:#d9c6de;color:#5a3a63;font-weight:600}

/* Menu del clic derecho. */
.cal-ctx{position:absolute;z-index:60;background:var(--superficie);border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);box-shadow:0 6px 20px rgba(20,25,35,.22);min-width:196px;overflow:hidden}
.cal-ctx .ctx-cab{padding:6px 12px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris2);background:var(--superficie2);border-bottom:1px solid var(--linea-suave)}
.cal-ctx button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 12px;
  font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--tinta)}
.cal-ctx button:hover{background:var(--azul-claro)}

/* Panel de creacion: centrado, sobre un velo. */
.cal-velo{position:fixed;inset:0;background:rgba(20,25,35,.45);z-index:70}
.cal-panel{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100% - 28px));max-height:88vh;overflow:auto;
  background:#fffdf7;border:1px solid var(--oro-borde);border-radius:5px;
  box-shadow:0 14px 44px rgba(20,25,35,.3)}
.cal-panel .cp-cab{background:var(--oro-claro);padding:9px 14px;font-size:13px;font-weight:600;
  color:#6d5719;display:flex;align-items:center;gap:8px;position:sticky;top:0}
.cal-panel .cp-x{margin-left:auto;background:none;border:0;color:#8a6d1c;cursor:pointer;
  font-size:16px;line-height:1;padding:0 2px;font-family:inherit}
.cal-panel .cp-cuerpo{padding:14px}
.cal-panel .cp-tipo{display:flex;border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  overflow:hidden;width:fit-content;margin-bottom:14px}
.cal-panel .cp-tipo button{background:var(--superficie);border:0;padding:7px 18px;font-size:12.5px;
  cursor:pointer;font-family:inherit;color:var(--gris)}
.cal-panel .cp-tipo button.on{background:var(--azul);color:#fff;font-weight:600}
.cal-panel .cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 13px}
.cal-panel .cp-grid .completo{grid-column:1/-1}
.cal-panel .cp-grid .dos{grid-column:span 2}
.cal-panel .cp-pie{margin-top:13px;display:flex;gap:8px}
@media (max-width:760px){
  .cal-panel .cp-grid{grid-template-columns:1fr}
  .cal-panel .cp-grid .dos{grid-column:1}
}
/* Ganchos de JavaScript sin aspecto propio: el estilo se lo dan .boton.chico y
   .boton.oro. Se declaran para que quede claro que existen a proposito. */
.cal-nuevo{}
.cp-cancelar{}

/* v9.27 · Pestañas de Configuracion. Doce secciones en una tira eran demasiadas
   para desplazarse; se agrupan por cuando se usa cada cosa. */
.cfg-barra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--linea);margin-bottom:16px}
.cfg-tabs{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.cfg-tab{padding:9px 15px;font-size:13.5px;color:var(--gris);border:1px solid transparent;
  border-bottom:0;background:none;cursor:pointer;font-family:inherit;position:relative;bottom:-1px}
.cfg-tab:hover{color:var(--tinta)}
.cfg-tab.on{background:var(--superficie);border-color:var(--linea);color:var(--tinta);
  font-weight:600;border-radius:var(--radio) var(--radio) 0 0}
.cfg-busca{padding-bottom:7px}
.cfg-busca input{border:1px solid var(--linea-fuerte);border-radius:var(--radio-boton);
  padding:6px 13px;font-size:12.5px;font-family:inherit;background:var(--superficie);width:220px}
.cfg-sinres{padding:22px;text-align:center;color:var(--gris);font-size:13px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio)}
@media (max-width:640px){
  .cfg-busca{width:100%;padding-bottom:9px}
  .cfg-busca input{width:100%}
  .cfg-tab{padding:8px 11px;font-size:12.5px}
}
/* Gancho de las tarjetas de Configuracion: el aspecto lo da .tarjeta, esta solo
   marca a que pestaña pertenece cada una. Se declara para dejar constancia. */
.cfg-t{}


/* ===========================================================================
   v9.41 · CONVENCIÓN DEL BOTÓN SECUNDARIO
   ---------------------------------------------------------------------------
   Un gesto que no se ve no existe. Todo lo que ofrezca menú con el botón
   secundario lleva la clase `con-menu`, y con ella tres señales que se
   refuerzan: el triángulo en la esquina, el puntero contextual y el aviso
   emergente (que va en el atributo `title` del elemento).

   Se aplica al documento de una actuación y a las casillas del Calendario, que
   tenían ese menú desde la 9.23 sin anunciarlo nunca. La misma marca en los dos
   sitios convierte un truco en una regla del sistema.
   =========================================================================== */
.con-menu{position:relative;cursor:context-menu}
.con-menu::after{content:'';position:absolute;right:3px;bottom:3px;
  width:0;height:0;border-style:solid;border-width:0 0 6px 6px;
  border-color:transparent transparent var(--gris2) transparent;opacity:.45}
.con-menu:hover::after{opacity:.9;border-color:transparent transparent var(--azul) transparent}

/* Menú del documento. Se coloca donde se pulsó, como el del Calendario. */
.doc-menu{position:absolute;z-index:60;min-width:230px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:5px}
.doc-menu[hidden]{display:none}
.doc-menu .grp{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--gris);
  padding:6px 10px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.doc-menu a,.doc-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:6px 10px;font-size:12.5px;font-family:var(--sans);color:var(--tinta-suave);
  border-radius:4px;cursor:pointer;text-decoration:none}
.doc-menu a:hover,.doc-menu button:hover{background:var(--azul-claro);color:var(--azul)}
.doc-menu .peligro{color:var(--peligro)}
.doc-menu .peligro:hover{background:var(--peligro-bg)}
.doc-menu form{margin:0}


/* v9.44 · El evento del Panel ya no es un <a>; conserva su realce al pasar. */
.evento.clic-ev:hover{background:var(--azul-claro)}


/* v9.45 · Panel para adjuntar sin salir de la pantalla. Nace de la citación,
   donde salir significaba perder el enlace de Zoom recién creado. */
.panel-adj{border:1px solid var(--linea);border-radius:6px;background:var(--superficie);
  margin-top:10px;overflow:hidden}
.panel-adj[hidden]{display:none}
.panel-adj .cabp{background:var(--superficie2);padding:8px 12px;font-size:12.5px;font-weight:700;
  color:var(--azul);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--linea)}
.panel-adj .cuerpo-p{padding:10px 12px;max-height:280px;overflow:auto}
.panel-adj .ruta-p{font-family:var(--mono);font-size:11.5px;color:var(--gris);margin-bottom:8px;
  word-break:break-all}
.panel-adj .itm{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:4px;
  cursor:pointer;font-size:13px}
.panel-adj .itm:hover{background:var(--azul-claro)}
.panel-adj .itm .ic{width:18px;text-align:center;opacity:.6}
.panel-adj .cerrar-p{margin-left:auto;background:none;border:0;font-size:15px;color:var(--gris);
  cursor:pointer;line-height:1}

/* v9.51 · Partes y apoderados dentro de Datos generales. El apoderado cuelga de
   su parte con una barra a la izquierda, para que se lea a quién representa. */
.ficha-parte{border:1px solid var(--linea-suave);border-radius:4px;padding:11px 13px;
             margin-bottom:9px;background:var(--superficie2)}
.sel-pos{padding:2px 6px;border:1px solid var(--linea-fuerte);border-radius:4px;font-size:11.5px}
.apo{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:9px;padding-left:13px;
     border-left:3px solid var(--linea-fuerte);font-size:12.5px}
.apo.vacio-apo{border-left-color:var(--linea-suave)}
.apo-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;padding-left:13px}
.crear-caja{border:1px solid var(--oro-borde);background:var(--oro-claro);border-radius:4px;
            padding:14px 15px;margin-top:10px}