/* Estilos propios de la versión web: vistas, acceso y administración. */

/* Cada bloque declara en qué pestaña vive; el otro queda oculto. */
body[data-vista="general"] [data-vista="edicion"],
body[data-vista="edicion"] [data-vista="general"] { display: none !important; }

/* Comodidad visual según permisos. La seguridad real está en el servidor. */
body.sin-edicion [data-requiere="editar"],
body:not(.es-admin) [data-requiere="admin"],
body:not(.acceso-total) [data-requiere="total"] { display: none !important; }

body.cargando-app main { opacity: 0.35; pointer-events: none; }

.aviso-rol { border-left: 4px solid var(--color-primario, #2563eb); }

.usuario-actual { font-size: 12px; color: var(--color-texto-suave, #64748b); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-organizacion { max-width: 200px; }

.acceso-overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: var(--color-fondo, #f1f5f9);
}
.acceso-panel {
  width: min(420px, 100%); background: var(--color-panel, #fff); border: 1px solid var(--color-borde, #e2e8f0);
  border-radius: 12px; padding: 28px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.acceso-panel h1 { margin: 12px 0 4px; font-size: 22px; }
.acceso-ayuda { margin: 0 0 16px; color: var(--color-texto-suave, #64748b); }
.acceso-form { display: grid; gap: 8px; }
.acceso-form input { padding: 8px 10px; }
.acceso-form .btn { margin-top: 8px; }
.acceso-enlaces { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.btn-enlace { background: none; border: 0; padding: 0; color: var(--color-primario, #2563eb); cursor: pointer; text-decoration: underline; font: inherit; }
.acceso-mensaje { min-height: 1.4em; margin: 14px 0 0; }
.acceso-mensaje[data-tipo="error"] { color: var(--color-peligro, #dc2626); }
.acceso-mensaje[data-tipo="exito"] { color: var(--color-exito, #16a34a); }

.operacion-detalle summary { cursor: pointer; }
.operacion-detalle ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; }
.estado-operacion { font-size: 12px; color: var(--color-texto-suave, #64748b); }

/* Vinculación de personal */
.celda-dia.fuera-periodo { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(100, 116, 139, 0.3) 4px 6px); }
.celda-dia.fuera-periodo .marca-codigo { opacity: 0.55; }
.celda-dia.fuera-periodo button { cursor: not-allowed; }
.muestra-fuera-periodo { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(100, 116, 139, 0.55) 3px 5px); border: 1px solid rgba(100, 116, 139, 0.5); }
.marca-vinculacion { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: rgba(217, 119, 6, 0.16); color: #b45309; }
.marca-vinculacion.desvinculado { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.chip-movimiento { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-movimiento.vinculacion { background: rgba(22, 163, 74, 0.16); color: #15803d; }
.chip-movimiento.desvinculacion { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.fila-movimiento-anulado td { opacity: 0.6; }
.fila-movimiento-anulado .chip-movimiento { text-decoration: line-through; }
.panel-movimiento { border: 1px solid var(--color-borde, #e2e8f0); border-radius: 10px; padding: 12px 16px; margin: 8px 0 16px; }
.panel-movimiento h3 { margin-top: 0; }
.bloque-alta { border: 1px dashed var(--color-borde, #cbd5e1); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.bloque-alta legend { font-weight: 600; padding: 0 4px; }
.alerta-fuera-periodo { margin-top: 8px; }