/* ============================================================
   VetCare · Sistema de diseño
   Paleta: teal clínico profundo + hueso frío + dorado cálido
   Tipografía: Fraunces (display) / Inter (UI) / IBM Plex Mono (datos)
   ============================================================ */

:root{
  --teal-900:#0F2E2C;
  --teal-700:#1F5F5B;
  --teal-600:#2A7A74;
  --teal-100:#DCEAE8;
  --teal-50:#EEF5F4;
  --bone:#F5F6F2;
  --bone-2:#EDEEE7;
  --ink:#1C2B29;
  --ink-soft:#4B5A57;
  --gold:#C99A3E;
  --gold-soft:#F1E1BC;
  --coral:#C1543B;
  --coral-soft:#F6DDD6;
  --ok:#2F7A4F;
  --ok-soft:#DCEEE0;
  --line:#DDE3E0;
  --white:#FFFFFF;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,46,44,.06);
  --shadow:0 6px 20px rgba(15,46,44,.08);
  --shadow-lg:0 16px 40px rgba(15,46,44,.16);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--teal-900); margin:0; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:var(--font-body);}
::selection{background:var(--gold-soft);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-weight:600; font-size:.92rem; cursor:pointer; transition:.15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{ background:var(--teal-700); color:var(--white); }
.btn-primary:hover{ background:var(--teal-900); }
.btn-gold{ background:var(--gold); color:var(--teal-900); }
.btn-gold:hover{ filter:brightness(.95); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--teal-700); color:var(--teal-700); }
.btn-danger{ background:var(--coral-soft); color:var(--coral); }
.btn-danger:hover{ background:var(--coral); color:var(--white); }
.btn-sm{ padding:6px 12px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-icon{ padding:8px; border-radius:50%; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(42,122,116,.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(201,154,62,.14), transparent 45%),
    var(--teal-900);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-wrap{ width:100%; max-width:960px; display:grid; grid-template-columns:1fr 1.1fr; gap:0; background:transparent;}
.login-brand{
  color:var(--bone); display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:48px;
}
.brand-mark{ color:var(--gold); }
.brand-name{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--white); }
.brand-tag{ color:var(--teal-100); font-size:1rem; margin-top:4px; }
.login-brand::after{
  content:"Historias clínicas, agenda y cobros en un solo lugar para tu equipo.";
  color:var(--teal-100); font-size:.95rem; line-height:1.6; max-width:340px; margin-top:12px;
}
.login-card{
  background:var(--white); border-radius:var(--radius-lg); padding:40px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:14px;
}
.login-card h1{ font-size:1.5rem; }
.login-sub{ color:var(--ink-soft); font-size:.9rem; margin-bottom:8px;}
.campo{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.campo input, .campo select, .campo textarea{
  font-family:var(--font-body); font-size:.95rem; padding:11px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bone); color:var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:2px solid var(--teal-600); outline-offset:1px; background:var(--white);
}
.login-error{ background:var(--coral-soft); color:var(--coral); padding:10px 12px; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; }
.login-demo{ margin-top:10px; border-top:1px dashed var(--line); padding-top:14px; }
.login-demo p{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; margin-bottom:8px;}
.login-demo ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.login-demo li{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--ink-soft); }
.login-demo code{ font-family:var(--font-mono); background:var(--teal-50); color:var(--teal-700); padding:2px 8px; border-radius:4px; font-size:.78rem;}

/* ============================================================
   DASHBOARD SHELL
   ============================================================ */
.app{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }

.sidebar{
  background:var(--teal-900); color:var(--bone); display:flex; flex-direction:column;
  padding:22px 16px; position:sticky; top:0; height:100vh;
}
.side-brand{ display:flex; align-items:center; gap:10px; padding:0 8px 22px; color:var(--gold); }
.side-brand span{ font-family:var(--font-display); font-size:1.25rem; color:var(--white); font-weight:700; }
.side-user{
  background:rgba(255,255,255,.06); border-radius:var(--radius); padding:12px 14px; margin-bottom:20px;
}
.side-user .rol{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--teal-900); background:var(--gold); padding:2px 8px; border-radius:20px; margin-top:6px;
}
.side-user .nombre{ font-weight:600; font-size:.92rem; }
.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.side-nav button{
  display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none; color:var(--teal-100);
  padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:.88rem; font-weight:500;
}
.side-nav button:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.side-nav button.activo{ background:var(--teal-700); color:var(--white); font-weight:600; }
.side-nav .icon{ width:18px; text-align:center; }
.side-logout{
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
}
.side-logout button{
  width:100%; background:rgba(193,84,59,.16); color:#F4B7A6; border:none; padding:10px 12px;
  border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-size:.85rem;
}
.side-logout button:hover{ background:var(--coral); color:var(--white); }

.main{ padding:28px 34px; max-width:1400px; }
.main-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.main-header h2{ font-size:1.6rem; }
.main-header .sub{ color:var(--ink-soft); font-size:.9rem; margin-top:4px; }
.header-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Tarjetas / KPIs ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:26px; }
.kpi{ background:var(--white); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.kpi .label{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;}
.kpi .value{ font-family:var(--font-display); font-size:1.9rem; color:var(--teal-900); margin-top:6px;}
.kpi .value.gold{ color:var(--gold); }
.kpi .value.coral{ color:var(--coral); }

.card{ background:var(--white); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-bottom:22px;}
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; flex-wrap:wrap;}
.card-head h3{ font-size:1.1rem; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; font-size:.88rem; }
thead th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
  padding:10px 12px; border-bottom:2px solid var(--line); font-weight:700;
}
tbody td{ padding:12px; border-bottom:1px solid var(--bone-2); vertical-align:middle;}
tbody tr:hover{ background:var(--teal-50); }
.tabla-vacia{ text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:.9rem; }

/* ---------- Badges de estado ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:.74rem; font-weight:700; white-space:nowrap;}
.badge-espera{ background:var(--gold-soft); color:#8A6414; }
.badge-pendiente{ background:var(--teal-100); color:var(--teal-700); }
.badge-pago{ background:var(--coral-soft); color:var(--coral); }
.badge-finalizada{ background:var(--ok-soft); color:var(--ok); }
.badge-cancelada{ background:#EFEFEF; color:#777; }
.badge-activo{ background:var(--ok-soft); color:var(--ok); }
.badge-inactivo{ background:#EFEFEF; color:#888; }

/* ---------- Formularios ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.form-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.form-grid .full{ grid-column:1/-1; }
.campo textarea{ resize:vertical; min-height:70px; font-family:var(--font-body); }
fieldset{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 16px; }
fieldset legend{ font-weight:700; color:var(--teal-700); font-size:.85rem; padding:0 6px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,46,44,.55); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100;
}
.modal{
  background:var(--white); border-radius:var(--radius-lg); padding:26px; width:100%; max-width:640px;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal.modal-lg{ max-width:880px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-head h3{ font-size:1.2rem; }
.modal-close{ background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-soft); line-height:1;}
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.tabs button{
  background:none; border:none; padding:10px 16px; font-weight:600; color:var(--ink-soft); cursor:pointer;
  font-size:.88rem; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.tabs button.activo{ color:var(--teal-700); border-bottom-color:var(--teal-700); }

/* ---------- Utilidades ---------- */
.flex{ display:flex; gap:10px; align-items:center; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.text-soft{ color:var(--ink-soft); }
.text-mono{ font-family:var(--font-mono); font-size:.85rem; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.pill-count{ background:var(--teal-100); color:var(--teal-700); border-radius:20px; padding:1px 9px; font-size:.72rem; font-weight:700;}
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--teal-900); color:var(--white); padding:13px 20px;
  border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:.88rem; font-weight:600; z-index:200;
  display:flex; align-items:center; gap:10px;
}
.toast.error{ background:var(--coral); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.empty-state h4{ color:var(--ink); margin-bottom:6px; }
.buscador{ position:relative; }
.buscador input{ padding-left:34px !important; min-width:240px; }
.buscador::before{ content:"⌕"; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:1.1rem;}
.item-linea{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; }
.total-line{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:1.3rem; padding-top:12px; border-top:2px solid var(--line); margin-top:10px;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .login-wrap{ grid-template-columns:1fr; }
  .login-brand{ display:none; }
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:relative; height:auto; }
  .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; }
}

/* ---------- Impresión (documentos clínicos) ---------- */
.print-only{ display:none; }
@media print{
  body *{ visibility:hidden; }
  .print-sheet, .print-sheet *{ visibility:visible; }
  .print-sheet{ position:absolute; top:0; left:0; width:100%; padding:20px; }
  .print-only{ display:block; }
}
.print-sheet{ font-family:var(--font-body); color:#111; }
.print-sheet h2{ font-family:var(--font-display); }
.print-sheet .doc-head{ display:flex; justify-content:space-between; border-bottom:2px solid #111; padding-bottom:10px; margin-bottom:16px;}
.print-sheet .doc-title{ text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; font-weight:700; text-align:right;}
.print-sheet table{ margin-top:10px; }
.print-sheet .firma{ margin-top:60px; border-top:1px solid #111; width:260px; text-align:center; padding-top:6px; font-size:.85rem;}