:root {
  --azul: #1f3864; --azul2: #2e5597; --celeste: #dce6f2; --dorado: #c9a227; --rojo: #b3261e; --verde: #2e7d32;
  --gris: #f4f6f9; --borde: #d0d7e2; --texto: #1c2330; --tenue: #5b6575; --blanco: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--gris); }
a { color: var(--azul2); }
.barra { display: flex; align-items: center; gap: 18px; padding: 8px 18px; background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; }
.logo { background: var(--dorado); color: var(--azul); font-weight: 800; border-radius: 8px; padding: 6px 8px; }
.marca small { color: var(--dorado); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.sub { font-size: 11px; opacity: .8; }
#menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
#menu a { color: #fff; text-decoration: none; padding: 6px 9px; border-radius: 6px; font-size: 14px; white-space: nowrap; }
#menu a.activo, #menu a:hover { background: var(--azul2); }
#usuario { font-size: 12px; text-align: right; }
#usuario button { margin-left: 8px; }
main { max-width: 1400px; margin: 0 auto; padding: 18px; }
h1 { font-size: 20px; margin: 4px 0 14px; color: var(--azul); }
h2 { font-size: 16px; margin: 18px 0 8px; color: var(--azul); }
h3 { font-size: 14px; margin: 12px 0 6px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 200px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.campo label { font-weight: 600; font-size: 12px; color: var(--tenue); }
.campo .ayuda { font-size: 11px; color: var(--tenue); }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; background: #fff; width: 100%; }
textarea { min-height: 60px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: #f0f2f5; color: #444; }
input.error, select.error, textarea.error { border-color: var(--rojo); background: #fff6f5; }
button { border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; background: var(--azul2); color: #fff; }
button.sec { background: #e7ecf4; color: var(--azul); }
button.peligro { background: var(--rojo); }
button.ok { background: var(--verde); }
button.mini { padding: 3px 8px; font-size: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--borde); padding: 5px 6px; vertical-align: top; text-align: left; }
th { background: var(--azul); color: #fff; font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.sub td { background: var(--celeste); font-weight: 600; }
tr.total td { background: #eef2f8; font-weight: 700; }
.tabla-scroll { overflow-x: auto; }
.meses td.mes { text-align: center; padding: 2px; min-width: 30px; }
.mes input[type=checkbox] { width: 18px; height: 18px; }
.mes-on { background: #9dc3e6 !important; }
td input, td select, td textarea { padding: 4px 6px; }
td input.n { text-align: right; min-width: 80px; }
.pestanas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--azul); margin-bottom: 14px; }
.pestanas a { padding: 8px 12px; text-decoration: none; color: var(--azul); background: #e7ecf4; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 13px; }
.pestanas a.activo { background: var(--azul); color: #fff; }
.pestanas a .n-err { background: var(--rojo); color: #fff; border-radius: 10px; padding: 0 6px; margin-left: 4px; font-size: 11px; }
.estado { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.e-B { background: #eee; } .e-E { background: #fff3cd; } .e-O { background: #ffe0dc; color: var(--rojo); }
.e-A { background: #dcf3dd; color: var(--verde); } .e-R { background: #f5c6c2; } .e-C { background: #ddd; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.indicador { background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--azul2); border-radius: 8px; padding: 12px; }
.indicador b { font-size: 24px; display: block; color: var(--azul); }
.obs { list-style: none; padding: 0; margin: 0; }
.obs li { padding: 6px 10px; border-left: 4px solid var(--rojo); background: #fff6f5; margin-bottom: 4px; border-radius: 4px; }
.obs li a { margin-left: 6px; font-size: 12px; }
.correcto { padding: 10px; background: #e8f5e9; border-left: 4px solid var(--verde); border-radius: 4px; }
.alerta { padding: 10px; background: #fff3cd; border-left: 4px solid var(--dorado); border-radius: 4px; margin-bottom: 10px; }
td.error { color: var(--rojo); font-weight: 700; }
.chip { display: inline-block; background: var(--celeste); color: var(--azul); border-radius: 10px; padding: 1px 8px; margin: 1px; font-size: 12px; }
.vinc { min-width: 120px; }
.vinc-panel { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 300px; overflow: auto; min-width: 280px; }
.vinc-panel label { display: block; font-size: 12px; padding: 2px 0; }
.vinc-panel input { width: auto; margin-right: 6px; }
.pie-fijo { position: sticky; bottom: 0; background: #fff; border-top: 2px solid var(--azul); padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; z-index: 10; margin: 14px -18px -18px; }
.pie-fijo .estado-guardado { margin-right: auto; color: var(--tenue); font-size: 12px; }
.pie-fijo .estado-guardado.pendiente { color: var(--rojo); font-weight: 600; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal .caja { background: #fff; border-radius: 12px; padding: 20px; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; }
.oculto { display: none !important; }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--azul); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 60; max-width: 90%; }
.aviso.error { background: var(--rojo); }
.login { max-width: 380px; margin: 60px auto; }
.cargando { color: var(--tenue); }
.tenue { color: var(--tenue); font-size: 12px; }
.derecha { text-align: right; }
.grupo-check label { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-weight: 400; color: var(--texto); }
.grupo-check input { width: auto; }
.comp { border-left: 4px solid var(--dorado); }
@media (max-width: 700px) {
  main { padding: 10px; } .pie-fijo { margin: 10px -10px -10px; }
  .barra { padding: 8px 10px; } #usuario { width: 100%; text-align: left; }
}
/* anchos de tablas del plan */
input[type=file] { width: auto; border: 0; padding: 0; }
#usuario .tenue { color: #c9d4e6; }
.meses td:nth-child(2) { min-width: 240px; }
.meses td:nth-child(3) { width: 120px; }
.meses td:nth-child(4) input.n { width: 70px; min-width: 0; }
.hitos td input.n { width: 70px; min-width: 0; }
.ind { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(170px, 3fr) 64px 100px 58px 30px; gap: 6px; margin-bottom: 6px; align-items: start; }
.ind input.n { min-width: 0; }
.ppto td input.n { width: 92px; min-width: 0; }
.ppto td:nth-child(2) { min-width: 230px; }
.ppto td:nth-child(3) { min-width: 110px; }
.ppto td.num { min-width: 110px; }
/* portal de convocatorias */
.portada { background: linear-gradient(120deg, var(--azul) 0%, var(--azul2) 70%, #3f6fb5 100%); color: #fff; border-radius: 12px; padding: 22px 26px; margin-bottom: 18px; }
.portada h1 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.portada p { margin: 6px 0; max-width: 820px; }
.portada button { background: var(--dorado); color: var(--azul); font-weight: 700; }
.portada button.sec { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.5); }
.convs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.conv { background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(31,56,100,.08); }
.conv-cab { padding: 16px 18px 12px; border-top: 6px solid var(--dorado); background: linear-gradient(180deg, #f6f8fc, #fff); }
.conv-cab h2 { margin: 8px 0 2px; font-size: 17px; }
.conv-cuerpo { padding: 0 18px 8px; flex: 1; }
.conv-cuerpo p { margin: 8px 0; }
.cierre { color: var(--tenue); }
.cierre.urgente { color: var(--rojo); }
.conv-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--borde); }
.conv-acciones button { width: 100%; }
.faq { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.faq summary { font-weight: 600; cursor: pointer; }
.docs { padding-left: 18px; }
.docs li { margin: 6px 0; }
/* acceso */
.captcha-fila { display: flex; gap: 8px; align-items: center; }
img.captcha { border: 1px solid var(--borde); border-radius: 6px; height: 54px; width: 170px; }
.enlaces { justify-content: space-between; margin-top: 12px; font-size: 13px; }
.registro { max-width: 860px; margin: 20px auto; }
.login button[type=submit] { width: 100%; margin-top: 4px; }
#usuario button { margin-top: 2px; }
/* RENIEC */
.sello-reniec { display: inline-block; background: #e8f5e9; color: var(--verde); border: 1px solid #b9dfbb; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }
/* firma digital */
.firma-portada { background: linear-gradient(120deg, #17294a 0%, var(--azul) 55%, #2e5597 100%); }
.firma-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.firma-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .firma-columnas, .firma-grid { grid-template-columns: 1fr; } }
.paginador { justify-content: center; margin-bottom: 10px; }
.lienzo { position: relative; max-width: 600px; margin: 0 auto; cursor: crosshair; box-shadow: 0 4px 18px rgba(31,56,100,.18); background: #fff; user-select: none; }
.lienzo img { display: block; width: 100%; min-height: 200px; }
.sello-prev { position: absolute; cursor: grab; touch-action: none; border: 2px dashed var(--dorado); border-left-width: 5px; background: rgba(244,247,251,.92); color: var(--azul); display: flex; flex-direction: column; justify-content: center; padding: 2px 6px; overflow: hidden; line-height: 1.2; border-radius: 3px; }
.sello-prev small { color: var(--tenue); font-size: .8em; } .sello-prev b { font-size: 1.05em; }
.panel-firma { position: sticky; top: 76px; }
.panel-firma button.grande, .boton-firma { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; margin-top: 8px; }
.boton-firma { display: block; text-align: center; background: var(--verde); color: #fff; text-decoration: none; border-radius: 8px; box-shadow: 0 3px 10px rgba(46,125,50,.35); }
.boton-firma:hover { filter: brightness(1.08); }
.pasos { padding-left: 20px; margin: 6px 0 12px; } .pasos li { margin: 4px 0; }
.pasos-firma { list-style: none; padding: 0; margin: 6px 0 4px; counter-reset: p; }
.pasos-firma li { counter-increment: p; padding: 6px 8px 6px 36px; position: relative; color: var(--tenue); }
.pasos-firma li::before { content: counter(p); position: absolute; left: 6px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: #e7ecf4; color: var(--azul); text-align: center; font-weight: 700; font-size: 12px; line-height: 22px; }
.pasos-firma li.activo { color: var(--texto); font-weight: 600; } .pasos-firma li.activo::before { background: var(--dorado); }
.pasos-firma li.hecho { color: var(--verde); } .pasos-firma li.hecho::before { content: '✓'; background: var(--verde); color: #fff; }
.codigo, .huella { display: block; word-break: break-all; background: #f4f6f9; border: 1px solid var(--borde); border-radius: 6px; padding: 6px; font-size: 12px; margin: 6px 0; }
.error-txt { color: var(--rojo); font-weight: 600; }
.estado.ef-P { background: #fff3cd; } .estado.ef-F { background: #dcf3dd; color: var(--verde); }
.firma-hecha { display: flex; gap: 18px; align-items: flex-start; }
.firma-ok { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 12px; }
dt { font-weight: 600; color: var(--tenue); font-size: 12px; } dd { margin: 0; }
.firma-res { border: 1px solid var(--borde); border-left-width: 5px; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.firma-res.valida { border-left-color: var(--verde); background: #f6fbf6; } .firma-res.invalida { border-left-color: var(--rojo); background: #fff6f5; }
.agente { border-top: 5px solid var(--verde); }
.firma-hecha > div:nth-child(2) { flex: 1; min-width: 0; }
.miniatura { flex: 0 0 300px; margin: 0; text-align: center; } .miniatura img { width: 100%; border: 1px solid var(--borde); box-shadow: 0 3px 12px rgba(31,56,100,.15); }
@media (max-width: 900px) { .firma-hecha { flex-wrap: wrap; } .miniatura { flex-basis: 100%; } }
.sello-prev small { font-size: .78em; } .sello-prev b { font-size: 1.1em; }
.dni-consulta .captcha-fila input { max-width: 200px; }
input.desde-reniec { background: #f1f8f1; border-color: #b9dfbb; color: var(--texto); }
/* logos del sello */
.sello-prev { flex-direction: row; align-items: center; gap: 6px; }
.sello-prev .sello-logo { height: 86%; max-width: 30%; object-fit: contain; border-right: 1px solid #d0d7e2; padding-right: 5px; }
.sello-prev .sello-txt { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sello-prev .sello-txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sello-prev .sello-fecha { color: #966014; }
.logos-elegir { display: flex; flex-wrap: wrap; gap: 6px; }
.logo-op { background: #fff; border: 2px solid var(--borde); border-radius: 8px; padding: 4px; width: 64px; height: 52px; display: flex; align-items: center; justify-content: center; }
.logo-op img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-op.activo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(46,125,50,.2); }
.logo-op .sin-logo { color: var(--tenue); font-size: 11px; }
.logos-admin { margin-bottom: 8px; }
.logo-fila { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.logo-fila img { width: 48px; height: 40px; object-fit: contain; }
.logo-fila > div:nth-child(2) { flex: 1; }
.logo-fila.inactivo { opacity: .45; }
/* catálogos en pestañas */
.pestanas a .n-tab { background: rgba(255,255,255,.55); color: var(--azul); border-radius: 10px; padding: 0 6px; margin-left: 6px; font-size: 11px; }
.pestanas a.activo .n-tab { background: rgba(255,255,255,.25); color: #fff; }
/* zona para soltar el PDF */
.zona-pdf { border: 2px dashed #b8c4d8; border-radius: 12px; padding: 22px; display: flex; align-items: center; gap: 16px; cursor: pointer; background: #f8fafd; transition: .15s; }
.zona-pdf:hover, .zona-pdf.encima, .zona-pdf:focus { border-color: var(--azul); background: #eef3fb; outline: none; }
.zona-pdf.subiendo { opacity: .7; cursor: progress; }
.zona-icono { flex: 0 0 52px; height: 62px; border-radius: 6px; background: #c62828; color: #fff; font-weight: 800; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 13px; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.esquinas { display: flex; gap: 4px; align-items: center; margin: 4px 0 10px; } .esquinas button { width: 34px; font-size: 15px; }
/* visor de PDF */
#modal-caja.ancha { width: min(1100px, 96vw); max-width: 96vw; }
.visor-pdf { width: 100%; height: 72vh; border: 1px solid var(--borde); border-radius: 6px; background: #525659; }
/* ORCID */
.campo-orcid .acciones { margin-top: 4px; } .orcid-res { font-size: 12px; margin-top: 4px; }
.orcid-lista { list-style: none; padding: 0; margin: 6px 0; max-height: 220px; overflow: auto; border: 1px solid var(--borde); border-radius: 6px; }
.orcid-lista li { padding: 6px 8px; border-bottom: 1px solid var(--borde); } .orcid-lista code { font-size: 11px; color: var(--tenue); }
.sello-prev.arrastrando { cursor: grabbing; box-shadow: 0 6px 18px rgba(31,56,100,.35); background: rgba(255,255,255,.97); }
.sello-prev:hover { border-style: solid; }
.sello-prev img, .sello-prev * { pointer-events: none; user-select: none; }
/* consulta ORCID */
.buscador-orcid { display: flex; gap: 8px; } .buscador-orcid input { flex: 1; }
.orcid-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .orcid-grid { grid-template-columns: 1fr; } }
.orcid-resultados { max-height: 70vh; overflow: auto; }
.orcid-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: #fff; color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0 0 6px; font-weight: 400; }
.orcid-item:hover { border-color: var(--azul); background: #f4f7fc; } .orcid-item.activo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(46,125,50,.15); }
.orcid-item.unjbg b { color: var(--navy, #1f3864); } .orcid-item code { font-size: 11px; color: var(--tenue); }
.perfil-orcid .pestanas { margin-top: 10px; } .orcid-cuerpo { min-height: 120px; }
.vincular { display: flex; flex-direction: column; gap: 6px; min-width: 260px; max-width: 360px; }
.barra-fija { position: sticky; top: 0; z-index: 5; background: var(--fondo, #f3f5f9); padding: 6px 0; align-items: center; }
.barra-fija h1 { margin: 0; }
table.compacta td input.n { max-width: 140px; } table.compacta td:first-child input[type=checkbox] { margin: 0 6px; }
.panel-tab.oculto { display: none; }
.chip.alerta { background: #fff3e0; color: #8a5a00; } .chip.correcto { background: #e8f5e9; color: #1b5e20; padding: 1px 8px; border: 0; }
/* ---- Ritmo vertical uniforme entre bloques (tarjetas, indicadores, barras de acciones, pestañas) ---- */
.tarjeta, .indicadores, .portada, .alerta, .orcid-grid, .firma-columnas, .panel-tab > *, main > .acciones, main > div > .acciones { margin-bottom: 16px; }
.tarjeta > :first-child, .tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta .tarjeta:last-child { margin-bottom: 0; }
.orcid-grid > .tarjeta, .firma-columnas > * > .tarjeta:last-child { margin-bottom: 0; }
.indicadores + .tarjeta, .indicadores + div > .tarjeta:first-child { margin-top: 0; }
/* ---- v0.5: etapas del proyecto y evaluación ---- */
.etapa { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border: 1px solid currentColor; }
.etapa-P { color: #6b4fa0; } .etapa-E { color: #1f6fb2; } .etapa-L { color: #b26a00; } .etapa-C { color: #555; }
.e-L { background: #ffe9c7; color: #8a5200; }
.flujo { display: flex; list-style: none; padding: 0; margin: 6px 0 4px; gap: 0; flex-wrap: wrap; }
.flujo li { display: flex; align-items: center; gap: 6px; color: var(--tenue, #777); font-size: 13px; padding-right: 26px; position: relative; }
.flujo li:not(:last-child)::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; background: #cfd6e2; }
.flujo .n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e7ecf4; font-weight: 700; font-size: 12px; }
.flujo li.hecho { color: var(--verde); } .flujo li.hecho .n { background: var(--verde); color: #fff; }
.flujo li.actual { color: var(--azul); font-weight: 700; } .flujo li.actual .n { background: var(--azul); color: #fff; }
.ev-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0; }
tr.fila-sel td { background: #eef8ee; }
.indicador.excede { border-left-color: var(--rojo); } .indicador.excede b { color: var(--rojo); }
.tarjeta.alerta { border-left: 4px solid var(--dorado); background: #fffaf0; }
.submenu { position: relative; display: inline-flex; }
.submenu-btn { background: none; color: #fff; font-size: 14px; font-weight: 400; padding: 6px 9px; border-radius: 6px; }
.submenu.activo .submenu-btn, .submenu-btn:hover { background: var(--azul2); }
.submenu-lista { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--azul); border-radius: 8px; padding: 6px; min-width: 170px; box-shadow: 0 8px 20px rgba(0,0,0,.25); flex-direction: column; gap: 2px; }
.submenu:hover .submenu-lista, .submenu:focus-within .submenu-lista { display: flex; }
td.error { color: var(--rojo); font-weight: 700; }
table.matriz textarea { min-width: 150px; } table.matriz select { min-width: 160px; }
table.equipo td { vertical-align: top; } table.equipo td > * + * { margin-top: 4px; } table.equipo select { min-width: 120px; }
table.equipo td:nth-child(3) input { min-width: 190px; } table.equipo td:nth-child(5) input { min-width: 170px; }
.separador-o { text-align: center; color: var(--tenue, #777); margin: 10px 0; font-size: 13px; }
.boton-fp { width: 100%; border: 2px solid #c8102e; color: #c8102e; background: #fff; font-weight: 700; }
.boton-onpe { width: 100%; background: #1f3864; color: #fff; border: 0; }
.boton-onpe:hover { background: #2a4a80; }
.metodos-firma { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 14px; }
.metodo-op { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 8px 10px; border: 1px solid var(--borde, #dce2ec); border-radius: 8px; background: #fff; color: inherit; cursor: pointer; font: inherit; min-height: 74px; }
.metodo-op b { font-size: 13px; color: #1f3864; }
.metodo-op small { font-size: 11.5px; line-height: 1.3; color: var(--tenue, #6c757d); }
.metodo-op.activo { border: 2px solid #1f3864; background: #eef3fb; padding: 7px 9px; }
.metodo-op:disabled { opacity: .55; cursor: not-allowed; background: #f6f6f6; }
@media (max-width: 520px) { .metodos-firma { grid-template-columns: 1fr; } .metodo-op { min-height: 0; } }
/* v0.11: varios roles por usuario */
.roles-elegir { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.roles-elegir .rol-op { margin: 0; font-weight: 400; }
.chip-rol { display: inline-block; font-size: 11.5px; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 10px; background: #eef1f6; color: #33415c; white-space: nowrap; }
.chip-rol.principal { background: #1f3864; color: #fff; }
/* v0.11: gestión administrativa */
.t-B { background: #eee; } .t-E { background: #fff3cd; } .t-O { background: #ffe0dc; color: var(--rojo); } .t-A { background: #e3ecfb; color: #1f3864; }
.t-T { background: #e6f4ea; color: #1e6b34; } .t-R { background: #fff3cd; } .t-C { background: #dcf3dd; color: var(--verde); } .t-X { background: #ddd; color: #777; text-decoration: line-through; }
.flujo-tra { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0 0; counter-reset: paso; }
.flujo-tra li { counter-increment: paso; padding: 4px 10px 4px 6px; border-radius: 14px; background: #f1f3f7; color: #6c757d; font-size: 12.5px; }
.flujo-tra li::before { content: counter(paso); display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #d6dbe4; color: #fff; font-size: 11px; margin-right: 6px; }
.flujo-tra li.hecho { background: #e6f4ea; color: #1e6b34; } .flujo-tra li.hecho::before { background: #2e7d32; content: '✓'; }
.flujo-tra li.activo { background: #1f3864; color: #fff; font-weight: 600; } .flujo-tra li.activo::before { background: #c9a227; }
.barra-uso { width: 90px; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: #1f3864; }
.nuevo-tramite { flex-wrap: wrap; margin: 6px 0 14px; }
.derecha-auto { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ok-txt { color: var(--verde, #2e7d32); font-weight: 600; }