/* ===== CARDS ===== */
.card{background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border);padding:24px;transition:var(--transition);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--indigo),var(--blue),var(--cyan))}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.card-title .ct-badge{font-size:11px;padding:2px 8px;border-radius:var(--radius-full);background:var(--indigo-bg);color:var(--indigo);font-weight:600}

/* ===== STAT CARDS ===== */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:28px}
.stat-card{background:var(--card);border-radius:var(--radius-md);padding:24px;border:1px solid var(--border);transition:var(--transition);position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:4px}
.stat-card:nth-child(1)::after{background:linear-gradient(90deg,var(--indigo),var(--blue))}
.stat-card:nth-child(2)::after{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.stat-card:nth-child(3)::after{background:linear-gradient(90deg,var(--red),#E8635F)}
.stat-card:nth-child(4)::after{background:linear-gradient(90deg,var(--success),#4FD18B)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff}
.stat-icon-indigo{background:linear-gradient(135deg,var(--indigo),var(--blue));box-shadow:0 4px 12px rgba(43,56,144,.3)}
.stat-icon-blue{background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 4px 12px rgba(15,117,189,.3)}
.stat-icon-red{background:linear-gradient(135deg,var(--red),#E8635F);box-shadow:0 4px 12px rgba(191,30,45,.3)}
.stat-icon-green{background:linear-gradient(135deg,var(--success),#4FD18B);box-shadow:0 4px 12px rgba(34,169,92,.3)}
.stat-val{font-size:32px;font-weight:700;letter-spacing:-.03em;color:var(--text);line-height:1.1}
.stat-label{font-size:13px;color:var(--text2);margin-top:6px}
.stat-sub{font-size:12px;font-weight:600;margin-top:10px}

/* ===== AVATAR CELL (tablas) ===== */
.cell-user{display:flex;align-items:center;gap:10px}
.cell-avatar{width:34px;height:34px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;letter-spacing:.02em}
.cell-av-1{background:linear-gradient(135deg,var(--indigo),var(--blue))}
.cell-av-2{background:linear-gradient(135deg,var(--blue),var(--cyan))}
.cell-av-3{background:linear-gradient(135deg,var(--red),#E8635F)}
.cell-av-4{background:linear-gradient(135deg,var(--success),#4FD18B)}
.cell-name{font-weight:600;color:var(--text);line-height:1.3}
.cell-sub{font-size:11px;color:var(--text3);margin-top:1px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;transition:var(--transition);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 2px 8px rgba(43,56,144,.25)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 16px rgba(43,56,144,.35)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff}
.btn-secondary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-outline{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{background:var(--bg);border-color:var(--gray-light)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:var(--radius);border:1px solid var(--border);color:var(--text2);font-size:14px;background:var(--card)}
.btn-icon:hover{background:var(--indigo-bg);color:var(--indigo);border-color:var(--indigo)}
.btn-icon-danger:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.btn-verificar{background:var(--success-bg);color:var(--success);border:1px solid rgba(34,169,92,.3)}
.btn-verificar:hover{background:var(--success);color:#fff;border-color:var(--success)}
.btn-rechazar{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(232,163,37,.3)}
.btn-rechazar:hover{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-eliminar-doc{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(217,69,69,.3)}
.btn-eliminar-doc:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
/* Código sin enlace cuando el rol no puede editar. */
.td-code-plano{cursor:default}
.td-code-plano:hover{text-decoration:none;color:var(--blue)}

/* ===== INPUTS ===== */
.input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--card);transition:var(--transition);font-family:inherit}
.input:hover{border-color:var(--gray-light)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,117,189,.12)}
.input::placeholder{color:var(--text3)}

/* Select con flecha propia: quita el control nativo del navegador */
.select{
  width:100%;padding:11px 40px 11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);
  font-size:14px;background:var(--card);color:var(--text);transition:var(--transition);cursor:pointer;
  font-family:inherit;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B3890' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.select:hover{border-color:var(--gray-light)}
.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,117,189,.12)}
.select option{padding:10px;font-size:14px}

/* Campo de fecha: icono de calendario propio en color de marca */
input[type="date"].input{cursor:pointer;position:relative;font-variant-numeric:tabular-nums}
input[type="date"].input::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:0;position:absolute;right:0;top:0;width:44px;height:100%;
}
.field-date{position:relative}
.field-date::after{
  content:'';position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%232B3890' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
}
.field-date .input{padding-right:42px}

/* Campo con prefijo (coordenadas, documento) */
.field-icon{position:relative}
.field-icon .input{padding-left:40px}
.field-icon > svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}

/* ===== SELECTOR DE OPCIONES EN FICHAS ===== */
.pill-group{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-full);
  border:1.5px solid var(--border);background:var(--card);color:var(--text2);
  font-size:13px;font-weight:600;font-family:inherit;transition:var(--transition);
}
.pill:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.pill .pill-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:var(--transition)}
.pill.active{border-color:var(--indigo);background:linear-gradient(135deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 3px 10px rgba(43,56,144,.28)}
.pill.active .pill-dot{background:#fff}

/* Varias insignias en una misma celda (participante en varios programas) */
.badge-stack{display:flex;flex-wrap:wrap;gap:4px}

/* El programa principal se distingue dentro de la seleccion multiple */
.pill.pill-principal::after{
  content:'principal';font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.25);padding:2px 6px;border-radius:var(--radius-full);margin-left:2px;
}

/* ===== ERRORES Y AYUDAS DE CAMPO ===== */
.field-error{display:block;font-size:12px;font-weight:600;color:var(--danger);margin-top:6px;line-height:1.4}
.field-hint{display:block;font-size:12px;color:var(--text3);margin-top:6px;line-height:1.4}
.field-hint.hint-error{color:var(--danger);font-weight:600}
.form-group.has-error .input,
.form-group.has-error .select{border-color:var(--danger);background:var(--danger-bg)}
.form-group.has-error .input:focus,
.form-group.has-error .select:focus{box-shadow:0 0 0 3px rgba(217,69,69,.15)}
.form-group.has-error label{color:var(--danger)}
.form-group.has-error .pill-group{padding:4px;border-radius:var(--radius);background:var(--danger-bg)}

/* Fecha en tres listas: dia / mes / anio */
.date-parts{display:grid;grid-template-columns:.8fr 1.4fr 1fr;gap:8px}
.date-parts .select{padding-right:32px;background-position:right 9px center}

/* Filtros de la barra de herramientas: que no se estiren de mas */
.select-auto{width:auto;min-width:150px;flex-shrink:0}

/* ===== BOTÓN DE UBICACIÓN POR GPS ===== */
.btn-gps{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 18px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  font-size:14px;font-weight:600;font-family:inherit;
  box-shadow:0 3px 10px rgba(15,117,189,.28);transition:var(--transition);
}
.btn-gps:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-gps:active{transform:translateY(0)}
.btn-gps:disabled{opacity:.65;cursor:default;transform:none}
.btn-gps.cargando svg{animation:girar 1.1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ===== MOSTRAR CONTRASEÑA EN EL LOGIN ===== */
.campo-password{position:relative}
.campo-password .login-input{padding-right:46px}
.ver-password{
  position:absolute;right:6px;top:0;height:100%;width:38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:var(--transition);
}
/* El input trae margen inferior propio: el botón se alinea con la caja. */
.campo-password .login-input{margin-bottom:18px}
.ver-password{height:calc(100% - 18px)}
.ver-password:hover{color:var(--blue)}

/* ===== CATÁLOGO DE COMUNIDADES ===== */
.fila-agregar{display:flex;gap:8px}
.fila-agregar .input{flex:1}
.lista-comunidades{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius)}
.comunidad-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border)}
.comunidad-item:last-child{border-bottom:none}
.comunidad-item:hover{background:var(--bg)}
.comunidad-nombre{font-size:13px;font-weight:500;color:var(--text)}
.comunidad-origen{font-size:11px;color:var(--text3);font-style:italic}

/* ===== VISOR DE DOCUMENTOS ===== */
.doc-acciones{display:flex;gap:6px;flex-shrink:0}
.visor{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center}
.visor-pdf{width:100%;height:min(65vh,560px);border:none;display:block;background:#fff}
.visor-img{max-width:100%;max-height:min(65vh,560px);display:block;object-fit:contain}
.visor-vacio{padding:56px 24px;text-align:center;color:var(--text2);font-size:14px}
.visor-aviso{padding:48px 28px;text-align:center;color:var(--text2);max-width:420px;margin:0 auto}
.visor-aviso svg{color:var(--text3);margin-bottom:14px}
.visor-aviso-titulo{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.visor-aviso-detalle{font-size:13.5px;line-height:1.55}

/* Foto de perfil */
.perfil-foto-seccion{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.perfil-foto{
  width:86px;height:86px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--indigo),var(--blue));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:26px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(43,56,144,.28);
}
.perfil-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Con foto puesta, el span de las iniciales sigue en el documento pero oculto:
   se conserva porque el codigo lo busca por su id al abrir el perfil. */
.perfil-foto span[hidden]{display:none}
.perfil-foto-acciones{flex:1;min-width:200px}
.perfil-foto-titulo{font-size:14px;font-weight:600;color:var(--text)}
.perfil-foto-detalle{font-size:12.5px;color:var(--text2);margin-top:2px}
.perfil-foto-botones{display:flex;gap:8px;margin-top:10px}

/* El avatar de la barra superior muestra la foto si existe. */
.topbar-avatar{overflow:hidden}
.topbar-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Bloque de contraseña dentro del perfil */
.perfil-acceso{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.perfil-acceso-titulo{font-size:13.5px;font-weight:600;color:var(--text)}
.perfil-acceso-detalle{font-size:12.5px;color:var(--text2);margin-top:2px}
#perfilAvatar{font-size:15px;font-weight:700;letter-spacing:.02em}

/* ===== FICHAS DEL MAPA (InfoWindow de Google) ===== */
.gm-ficha{font-family:'Segoe UI',-apple-system,sans-serif;width:270px;margin:-9px -14px -6px}
.gm-ficha-head{display:flex;align-items:center;gap:11px;padding:15px 17px;color:#fff}
.gm-ficha-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.gm-ficha-title{font-size:14.5px;font-weight:700;line-height:1.25}
.gm-ficha-sub{font-size:11.5px;opacity:.85;margin-top:1px}
.gm-ficha-body{padding:13px 17px 15px}
.gm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;border-bottom:1px solid #F0F2F6}
.gm-row:last-of-type{border-bottom:none}
.gm-k{color:#8A8D96;font-weight:500}
.gm-v{color:#1A1D21;font-weight:600;text-align:right}
.gm-chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-full);display:inline-block}
.gm-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.gm-acciones{display:flex;gap:7px;margin-top:13px}
.gm-btn{flex:1;text-align:center;padding:8px 10px;border-radius:var(--radius);font-size:12.5px;font-weight:600;border:1px solid var(--border);color:var(--text2);text-decoration:none;transition:var(--transition)}
.gm-btn:hover{background:var(--bg)}
.gm-btn-primary{background:linear-gradient(135deg,var(--indigo),var(--blue));color:#fff;border-color:transparent}
.gm-btn-primary:hover{filter:brightness(1.08)}
.gm-help{font-size:11.5px;color:var(--text2);line-height:1.5;margin-top:10px}
.gm-help code{background:#F0F2F6;padding:1px 5px;border-radius:3px;font-size:11px}
.gm-code{background:#171B2C;color:#8FE3FF;padding:9px 11px;border-radius:6px;margin-top:8px;font-size:11.5px;font-family:'Consolas',monospace;line-height:1.6;white-space:pre;overflow-x:auto}
.search-box{position:relative}
.search-box .input{padding-left:40px}
.search-box::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--text3);border-radius:50%}
.search-box::after{content:'';position:absolute;left:27px;top:60%;width:2px;height:8px;background:var(--text3);transform:rotate(-45deg)}

/* ===== BADGES ===== */
.badge{font-size:12px;padding:3px 10px;border-radius:var(--radius-full);font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:var(--transition)}
.badge-salud{background:var(--success-bg);color:var(--success)}
.badge-educacion{background:var(--blue-bg);color:var(--blue)}
.badge-sustento{background:var(--warning-bg);color:var(--warning)}
.badge-terapia{background:var(--cyan-bg);color:var(--cyan)}
.badge-activo{background:var(--success-bg);color:var(--success)}
.badge-inactivo{background:var(--warning-bg);color:var(--warning)}
.badge-fallecido{background:var(--danger-bg);color:var(--danger)}
.badge-verificado{background:var(--success-bg);color:var(--success)}
.badge-pendiente{background:var(--warning-bg);color:var(--warning)}
.badge-rechazado{background:var(--danger-bg);color:var(--danger)}
.badge-admin{background:var(--red-bg);color:var(--red)}
.badge-coord{background:var(--blue-bg);color:var(--blue)}
.badge-tecnico{background:var(--success-bg);color:var(--success)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ===== TABLES ===== */
.table-wrap{background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm)}
.table-scroll{overflow-x:auto}
table{font-size:13px}
thead{background:linear-gradient(180deg,var(--bg),#EAEDF2)}
th{text-align:left;padding:14px 16px;font-weight:700;color:var(--indigo);font-size:11px;text-transform:uppercase;letter-spacing:.07em;border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text);transition:var(--transition)}
tbody tr{transition:var(--transition)}
tbody tr:hover{background:linear-gradient(90deg,var(--cyan-bg),transparent);box-shadow:inset 3px 0 0 var(--cyan)}
tbody tr:hover td{color:var(--text)}
.td-code{font-weight:700;color:var(--blue);cursor:pointer;font-family:'Consolas','Courier New',monospace;font-size:12px;letter-spacing:.02em}
.td-code:hover{text-decoration:underline;color:var(--indigo)}
.td-muted{color:var(--text2)}
.td-actions{display:flex;gap:2px}
.table-footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text2);border-top:1px solid var(--border)}
.table-empty{padding:48px;text-align:center;color:var(--text2);font-size:14px}

/* ===== TOOLBAR ===== */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.toolbar-left{display:flex;align-items:center;gap:10px;flex:1;max-width:500px}
.toolbar-right{display:flex;gap:8px}

/* ===== MODAL ===== */
/* Se escriben las cuatro posiciones en vez de `inset`: Safari anterior a 14.1
   y los Android viejos no entienden el atajo, y sin posición el modal se
   descuadra por completo. */
.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(13,16,32,.55);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;visibility:hidden;transition:var(--transition-slow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{background:var(--card);border-radius:var(--radius-lg);padding:0;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:scale(.92) translateY(10px);transition:var(--transition-slow);border-top:4px solid var(--cyan)}
.modal.modal-lg{max-width:740px}
.modal-overlay.show .modal{animation:modalIn .35s ease both}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;margin-bottom:0;background:linear-gradient(135deg,var(--indigo-bg),var(--cyan-bg))}
.modal-header-left{display:flex;align-items:center;gap:14px}
.modal-icon{width:46px;height:46px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--indigo),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(43,56,144,.3)}
.modal-title{font-size:18px;font-weight:700;color:var(--text)}
.modal-subtitle{font-size:12px;color:var(--text2);margin-top:2px;font-weight:400}
.modal-close{width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:var(--transition);font-size:18px;flex-shrink:0}
.modal-close:hover{background:rgba(0,0,0,.06);color:var(--text)}
.modal-body{padding:28px 32px 32px}

/* ===== FORM SECTIONS ===== */
.modal-section{margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.modal-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.modal-section-header{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--text);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
.ms-icon{width:26px;height:26px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-icon svg{width:14px;height:14px}
.ms-icon-indigo{background:var(--indigo-bg);color:var(--indigo)}
.ms-icon-blue{background:var(--blue-bg);color:var(--blue)}
.ms-icon-cyan{background:var(--cyan-bg);color:var(--cyan)}
.ms-icon-red{background:var(--red-bg);color:var(--red)}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}

/* ===== BARS ===== */
.bar-row{margin-bottom:16px}
.bar-header{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px}
.bar-label{font-weight:500;color:var(--text)}
.bar-value{font-weight:700;color:var(--text)}
.bar-track{height:10px;background:var(--bg);border-radius:var(--radius-full);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--radius-full);transition:width .8s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.bar-fill::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}

/* ===== GRÁFICAS DE REPORTES ===== */
.graf-vacio{padding:26px 4px;text-align:center;font-size:13px;color:var(--text3)}
.bar-pct{font-weight:500;color:var(--text3);font-size:12px}

/* Anillo de proporciones */
.anillo-caja{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.anillo{width:140px;height:140px;flex-shrink:0}
.anillo-total{font-size:26px;font-weight:700;fill:var(--text)}
.anillo-sub{font-size:10px;fill:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.anillo-leyenda{flex:1;min-width:150px;display:flex;flex-direction:column;gap:9px}
.anillo-item{display:flex;align-items:center;gap:8px;font-size:13px}
.anillo-punto{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.anillo-etiqueta{flex:1;color:var(--text);font-weight:500}
.anillo-valor{color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums}

/* Línea de registros por mes */
.grafico-linea{width:100%;height:auto;display:block;overflow:visible}
.linea-eje{stroke:var(--border);stroke-width:1}
.linea-punto{fill:var(--card);stroke:var(--blue);stroke-width:2.5}
.linea-mes{font-size:11px;fill:var(--text3)}
.linea-valor{font-size:11px;fill:var(--text2);font-weight:700}

/* ===== TOAST ===== */
.toast-container{position:fixed;top:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:14px 20px;border-radius:var(--radius);color:#fff;font-size:13px;font-weight:500;animation:toastIn .3s ease both;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px;max-width:360px}
.toast-exito{background:var(--success)}
.toast-error{background:var(--danger)}
.toast-warning{background:var(--warning)}
.toast.closing{animation:toastOut .3s ease both}

/* ===== DOCUMENT LIST ===== */
.doc-item{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);transition:var(--transition)}
.doc-item:last-child{border-bottom:none}
.doc-item:hover{background:rgba(15,117,189,.02)}
.doc-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.doc-icon-pdf{background:#fde8e8;color:var(--red)}
.doc-icon-img{background:#e0f0ff;color:var(--blue)}
.doc-icon-doc{background:#e8f5e8;color:var(--success)}
.doc-info{flex:1;min-width:0}
.doc-name{font-size:14px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-meta{font-size:12px;color:var(--text2);margin-top:3px}

/* ===== MAP ===== */
.map-container{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);height:500px;background:var(--bg)}
.map-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:16px}
.map-stat{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:16px;text-align:center;transition:var(--transition)}
.map-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.map-stat-val{font-size:26px;font-weight:700}
.map-stat-label{font-size:12px;color:var(--text2);margin-top:4px}
.map-no-key{display:flex;flex-direction:column;align-items:center;justify-content:center;height:500px;text-align:center;padding:40px;background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border)}
.map-no-key h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.map-no-key p{font-size:14px;color:var(--text2);max-width:450px;line-height:1.6}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.legend-dot{width:10px;height:10px;border-radius:50%}

/* ===== TWO COLUMN ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ===== ACTIVITY ===== */
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);transition:var(--transition)}
.activity-item:last-child{border-bottom:none}
.activity-item:hover{padding-left:4px}
.act-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.act-text{flex:1;font-size:13px}
.act-desc{font-weight:500;color:var(--text)}
.act-detail{color:var(--text2);font-size:12px;margin-top:2px}
.act-time{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}

/* ===== LOGIN ===== */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--indigo-dark) 0%,var(--indigo) 40%,var(--blue) 100%);position:relative;overflow:hidden}
.login-bg::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(0,173,239,.08);top:-200px;right:-200px}
.login-bg::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(191,30,45,.06);bottom:-100px;left:-100px}
.login-card{width:100%;max-width:420px;padding:44px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;z-index:1;animation:fadeInUp .6s ease both;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--red),var(--indigo),var(--blue),var(--cyan))}
/* En el login el logotipo es el elemento principal. La tarjeta ya es blanca y
   el PNG tiene transparencia, así que no hace falta caja: el logo va suelto y
   con su proporción real (1.37), lo que lo hace mucho más presente. */
.login-logo{width:180px;height:131px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--indigo);font-size:16px;font-weight:700;letter-spacing:.05em}
.login-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.login-title{text-align:center;font-size:24px;font-weight:700;margin-bottom:4px}
.login-title .t-red{color:var(--red)}
.login-title .t-gray{color:var(--gray)}
.login-sub{text-align:center;font-size:13px;color:var(--text2);margin-bottom:32px}
.login-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.login-input{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;margin-bottom:18px;transition:var(--transition)}
.login-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,117,189,.1)}
.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--indigo),var(--blue));color:#fff;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;transition:var(--transition)}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(43,56,144,.35)}
.login-btn:active{transform:translateY(0)}
.login-footer{text-align:center;font-size:12px;color:var(--text3);margin-top:24px}
.login-error{background:var(--danger-bg);color:var(--danger);padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:18px;display:none;animation:fadeIn .3s ease both;border:1px solid rgba(217,69,69,.15)}

/* ===== DISABLED PAGE ===== */
.disabled-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;animation:fadeIn .5s ease both}
.disabled-icon{width:80px;height:80px;border-radius:50%;background:var(--cyan-bg);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:14px;font-weight:700;color:var(--cyan)}

/* Con una ventana modal abierta, el fondo no se desplaza. En el telefono,
   deslizar sobre el fondo movia la pagina de atras y se perdia el formulario. */
body.con-modal{overflow:hidden}

/* Aviso en linea dentro de una tarjeta: explica algo del estado actual de la
   pantalla, como que la busqueda por texto deja fuera los filtros. */
.aviso-linea{background:rgba(0,173,239,.09);border-left:3px solid var(--cyan);
  color:var(--text2);font-size:12.5px;padding:9px 12px;border-radius:6px;margin-bottom:12px}

/* --- Filtros combinables de la pantalla de reportes ------------------------
   Cada grupo admite varias marcas a la vez, porque un participante puede estar
   en varios programas y los cooperantes piden cortes cruzados. */
.filtros-card{padding:16px 18px;margin-bottom:16px}
.filtros-aviso{font-size:12.5px;color:var(--text2)}
.filtros-grupo{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.filtros-titulo{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;
  letter-spacing:.04em;min-width:86px;padding-top:7px}
.filtros-grupo .pill-group{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.filtros-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;border-top:1px solid var(--border);padding-top:11px;margin-top:2px}
.filtros-resumen{font-size:12.5px;color:var(--text2)}

@media (max-width: 720px){
  /* En telefono la etiqueta va encima, que si no no queda sitio para los botones. */
  .filtros-grupo{flex-direction:column;gap:7px}
  .filtros-titulo{min-width:0;padding-top:0}
}