:root{--brand-primary:#0ea5e9;--brand-secondary:#6366f1;--line:#e5e7eb;--line-strong:#e2e8f0;--line-light:#eef2f7;}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;min-height:100vh;background:#006bb0;}
.app-shell{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem 2rem;overflow-x:hidden;}
.bg-shape{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(60rem 40rem at 20% 10%,#fff 0,transparent 50%),radial-gradient(60rem 40rem at 80% 70%,#fff 0,transparent 50%);pointer-events:none;} 
.card-styled{max-width:760px;width:100%;border:none;border-radius:1rem;box-shadow:0 1rem 2rem rgba(0,0,0,.15);animation:cardIn .5s ease-out both;} 
.card-styled-wide{max-width:1200px;min-height:calc(100vh - 5rem);} 
.card-styled .card-header{background-color:transparent;border-bottom:0;padding-bottom:0;} 
.form-label{font-weight:600;}
.input-group-text{background-color:#f1f5f9;border:1px solid var(--line-strong);} 
.form-control{border:1px solid var(--line-strong);transition:border-color .2s ease,box-shadow .2s ease,transform .06s ease;} 
.form-control:focus{border-color:var(--brand-secondary);box-shadow:0 0 0 .25rem rgba(99,102,241,.25);transform:translateY(-1px);} 
.input-group-text{transition:background-color .2s ease,border-color .2s ease,transform .06s ease;} 
.input-group:focus-within .input-group-text{border-color:var(--brand-secondary);transform:translateY(-1px);} 
.btn-primary{background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));border:none;background-size:200% 100%;transition:transform .2s ease,box-shadow .2s ease,background-position .4s ease;} 
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);background-position:100% 0;} 
.btn-primary:active{transform:translateY(0);box-shadow:0 .25rem .5rem rgba(0,0,0,.12);} 
hr{border:0;border-top:1px solid var(--line);opacity:.7;margin:1rem 0}
table{border-radius:0;overflow:visible;border:1px solid var(--line-strong);background:#fff}
.table thead th{background:#f8fafc;color:#0f172a;font-weight:600;border-bottom:1px solid var(--line-strong)}
.table-modern thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 #e2e8f0}
.table tbody tr:hover{background:#f1f5f9}
.table-bordered>:not(caption)>*{border-color:var(--line-strong)}
.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:rgba(14,165,233,.06)}
.table{font-size:.95rem}
.table tbody td{border-top:1px solid var(--line-light)}
.table-primary td{background:rgba(99,102,241,.08)!important}
.table-container{max-height:65vh;overflow:auto;border:1px solid var(--line-strong);background:#fff;box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08)}
.table-modern{border:none;background:transparent}
.table-modern thead th{background:linear-gradient(180deg,#f8fafc,#eef2f7);text-transform:uppercase;letter-spacing:.02em;font-size:.8rem}
.table-modern tbody tr:hover{background:#f8fafc}
.table-modern.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:rgba(99,102,241,.03)}
.table-compact td,.table-compact th{padding:.5rem .75rem}
.table-clean thead th{background:#fff;box-shadow:0 1px 0 var(--line-strong);text-transform:none;letter-spacing:0;font-size:.9rem}
.table-pro{border:1px solid var(--line-strong);background:#fff;border-radius:.75rem;overflow:hidden}
.table-pro thead th{background:var(--brand-secondary);color:#fff;font-weight:700;border-bottom:1px solid var(--line-strong);font-size:1rem;padding:.9rem 1rem;box-shadow:none}
.table-pro tbody td{border-top:1px solid var(--line-strong)}
.table-pro tbody tr{background:#fff}
.table-pro td+td,.table-pro th+th{border-left:0}
.table-pro tbody tr:hover{background:#f7fafc}
.table-pro tbody tr:nth-of-type(odd){background:transparent}
.table-active td{background:#f5f7fb !important}
.table-pro td,.table-pro th{vertical-align:middle}
.table .btn{border-radius:.375rem}
.table-responsive{border-radius:0}

 

@media (max-width: 576px){
  .app-shell{padding:1rem .75rem 1rem;}
  .card-styled-wide{min-height:auto;}
  .toolbar-compact{flex-wrap:wrap;gap:.5rem;}
  .toolbar-compact > div{width:100%;}
  #searchPersonas{max-width:none!important;width:100%!important;}
  .table-pro thead th{font-size:.9rem;padding:.6rem .6rem;}
  .table-compact td,.table-compact th{padding:.4rem .5rem;}
}

#tablaPersonas th,#tablaPersonas td{text-align:center}

.toolbar-compact .form-control-sm{height:28px!important;padding:.1rem .5rem!important;font-size:.85rem!important;line-height:1.2!important;}
.toolbar-compact .btn-sm{padding:.1rem .5rem!important;font-size:.85rem!important;line-height:1!important;}

@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes bgFloat{0%{transform:translateY(0) translateX(0);opacity:.15;}50%{transform:translateY(-8px) translateX(6px);opacity:.18;}100%{transform:translateY(0) translateX(0);opacity:.15;}}
.bg-shape{animation:bgFloat 16s ease-in-out infinite;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.alert:not(.d-none){animation:fadeIn .3s ease-out both;}
@keyframes pulseValid{0%{box-shadow:0 0 0 .25rem rgba(34,197,94,.15);}100%{box-shadow:0 0 0 .25rem rgba(34,197,94,0);}}
.form-control.is-valid{animation:pulseValid .45s ease-out;}
@keyframes pulseInvalid{0%{box-shadow:0 0 0 .25rem rgba(239,68,68,.18);}100%{box-shadow:0 0 0 .25rem rgba(239,68,68,0);}}
.form-control.is-invalid{animation:pulseInvalid .45s ease-out;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}