/* ===========================
   LA ROCA — DASHBOARD THEME
   Azul + panel de control (oscuro)
   =========================== */

:root{
  --bg:#070b18; --panel:#0b1329; --panel-2:#0f1a36;
  --surface:rgba(255,255,255,.03);
  --border:rgba(148,163,184,.18);

  --text:#e8eefc; --muted:#a8b3cf; --muted-2:#7f8aa6;

  --blue:#3b82f6; --blue-2:#60a5fa; --blue-3:#1d4ed8;

  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --info:#3b82f6;

  --shadow:0 10px 30px rgba(0,0,0,.55);
  --shadow-soft:0 8px 24px rgba(0,0,0,.35);

  --ring:rgba(96,165,250,.55);

  --r-sm:10px; --r-md:14px; --r-lg:18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(1000px 600px at 100% 10%, rgba(29,78,216,.18), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

a{color:var(--blue-2);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:12px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

.container{max-width:1280px;margin:0 auto;padding:22px 16px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}

.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(29,78,216,.75));box-shadow:0 8px 20px rgba(59,130,246,.25)}
.brand .title{font-size:1.05rem;font-weight:900;letter-spacing:.2px;line-height:1.1}
.brand .subtitle{font-size:.82rem;color:var(--muted);font-weight:700}

.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.35);overflow:hidden}
.card-header{padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.10);background:linear-gradient(180deg,rgba(15,26,54,.60),rgba(15,26,54,.30));display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{margin:0;font-size:.95rem;font-weight:900;letter-spacing:.2px}
.card-subtitle{margin:3px 0 0 0;font-size:.82rem;color:var(--muted);font-weight:650}
.card-body{padding:16px}

.hr{height:1px;background:rgba(148,163,184,.12);border:0;margin:14px 0}

.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:900;letter-spacing:.55px;text-transform:uppercase;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted)}
.badge.dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--muted)}
.badge.ok{border-color:rgba(34,197,94,.45);color:var(--ok);background:rgba(34,197,94,.10)} .badge.ok.dot::before{background:var(--ok)}
.badge.warn{border-color:rgba(245,158,11,.55);color:var(--warn);background:rgba(245,158,11,.10)} .badge.warn.dot::before{background:var(--warn)}
.badge.err{border-color:rgba(239,68,68,.55);color:var(--err);background:rgba(239,68,68,.10)} .badge.err.dot::before{background:var(--err)}
.badge.info{border-color:rgba(59,130,246,.55);color:var(--info);background:rgba(59,130,246,.10)} .badge.info.dot::before{background:var(--info)}

.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.03);margin:10px 0}
.alert .icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.14);font-weight:900}
.alert .title{margin:0;font-size:.88rem;font-weight:950;letter-spacing:.15px}
.alert .desc{margin:4px 0 0 0;color:var(--muted);font-size:.86rem;font-weight:650}
.alert.ok{border-left:4px solid rgba(34,197,94,.95)} .alert.ok .icon{color:var(--ok);border-color:rgba(34,197,94,.35)}
.alert.warn{border-left:4px solid rgba(245,158,11,.95)} .alert.warn .icon{color:var(--warn);border-color:rgba(245,158,11,.35)}
.alert.err{border-left:4px solid rgba(239,68,68,.95)} .alert.err .icon{color:var(--err);border-color:rgba(239,68,68,.35)}
.alert.info{border-left:4px solid rgba(59,130,246,.95)} .alert.info .icon{color:var(--blue-2);border-color:rgba(59,130,246,.35)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.04);color:var(--text);font-weight:900;letter-spacing:.15px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;user-select:none}
.btn:hover{background:rgba(255,255,255,.06);border-color:rgba(96,165,250,.35);box-shadow:0 10px 22px rgba(0,0,0,.35);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{border:0;background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(29,78,216,.85));box-shadow:0 10px 26px rgba(59,130,246,.18)}
.btn.primary:hover{box-shadow:0 0 0 3px rgba(96,165,250,.18),0 12px 30px rgba(59,130,246,.22)}
.btn.danger{border:0;background:linear-gradient(135deg,rgba(239,68,68,.95),rgba(127,29,29,.85))}
.btn.small{padding:8px 10px;border-radius:10px;font-size:.86rem}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.field{display:grid;gap:8px;margin:12px 0}
.label{font-size:.82rem;font-weight:950;letter-spacing:.35px;color:var(--muted);text-transform:uppercase}
.input,select,textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.18);color:var(--text);border-radius:12px;padding:10px 12px;outline:none;font-weight:650}
textarea{min-height:120px;resize:vertical}
.input:focus,select:focus,textarea:focus{border-color:rgba(96,165,250,.55);box-shadow:0 0 0 3px rgba(96,165,250,.14)}
.help{color:var(--muted-2);font-size:.84rem;font-weight:650}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.table thead th{position:sticky;top:0;z-index:1;text-align:left;font-size:.76rem;font-weight:950;letter-spacing:.55px;text-transform:uppercase;color:var(--muted);padding:12px 12px;background:rgba(15,26,54,.85);border-bottom:1px solid rgba(148,163,184,.14)}
.table tbody td{padding:12px 12px;border-bottom:1px solid rgba(148,163,184,.10);background:rgba(255,255,255,.02);color:var(--text);font-weight:650}
.table tbody tr:hover td{background:rgba(59,130,246,.05)}
.table .muted{color:var(--muted);font-weight:650}
.table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}

pre{margin:10px 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:rgba(0,0,0,.22);overflow:auto;color:var(--text)}