:root{
  --hmv-primary: #5A1D6D;
  --hmv-primary-2: #7A2B8A;
  --hmv-lavender: #EDE3F1;

  --hmv-gray: #2B2B2B;
  --hmv-muted: #6B7280;

  --hmv-bg: #F7F8FA;
  --hmv-card: #FFFFFF;
  --hmv-border: #E5E7EB;

  --hmv-danger: #B42318;
  --hmv-warning: #B54708;
  --hmv-success: #027A48;

  --hmv-radius: 16px;
  --hmv-radius-sm: 12px;
  --hmv-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* Base */
*{ box-sizing: border-box; }

body{
  background: var(--hmv-bg);
  color: var(--hmv-gray);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
}

.hmv-container{
  padding-bottom: 28px;
}

.hmv-muted{ color: var(--hmv-muted); }

.hmv-title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Safety global */
img{
  max-width: 100%;
  height: auto;
}

/* ---------------------------
   TOPBAR / NAVBAR
--------------------------- */
.hmv-topbar{
  background: #fff;
  border-bottom: 1px solid var(--hmv-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Watermark PRO */
.hmv-topbar::after{
  content:"";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 40px;
  background: url("/static/branding/logo_hmv.png") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}

/* Contenido encima del watermark */
.hmv-topbar-inner{
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Compat: navbar viejo */
.hmv-navbar{
  background: #fff;
  border-bottom: 1px solid var(--hmv-border);
}

/* Brand */
.hmv-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--hmv-gray);
}

/* Logo */
.hmv-logo{
  height: 44px;
  width: auto;
  display:block;
  flex: 0 0 auto;
}

.hmv-brand-text{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
}

.hmv-brand-title{
  font-weight: 900;
  letter-spacing: .3px;
}

.hmv-brand-subtitle{
  font-size: 12px;
  color: var(--hmv-muted);
  margin-top: 2px;
}

/* Compat: si algún template usa <img> sin class="hmv-logo" dentro de .hmv-brand */
.hmv-brand img{
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
}

/* ---------------------------
   BOTONES
--------------------------- */
.hmv-btn-primary{
  background: var(--hmv-primary);
  border: 1px solid var(--hmv-primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--hmv-radius-sm);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hmv-btn-primary:hover{
  background: var(--hmv-primary-2);
  border-color: var(--hmv-primary-2);
  color: #fff;
}

.hmv-btn-outline{
  background: transparent;
  border: 1px solid var(--hmv-primary);
  color: var(--hmv-primary);
  padding: 10px 14px;
  border-radius: var(--hmv-radius-sm);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hmv-btn-outline:hover{
  background: var(--hmv-lavender);
  color: var(--hmv-primary);
}

/* Compat con HTML viejo */
.btn-hmv{
  background: var(--hmv-primary);
  border: 1px solid var(--hmv-primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--hmv-radius-sm);
  cursor: pointer;
  font-weight: 800;
}
.btn-hmv:hover{
  background: var(--hmv-primary-2);
  border-color: var(--hmv-primary-2);
}
.btn-hmv-outline{
  background: transparent;
  border: 1px solid var(--hmv-primary);
  color: var(--hmv-primary);
  padding: 10px 14px;
  border-radius: var(--hmv-radius-sm);
  cursor: pointer;
  font-weight: 800;
}
.btn-hmv-outline:hover{
  background: var(--hmv-lavender);
}
.btn-hmv-outline.is-active{
  background: var(--hmv-lavender);
  border-color: var(--hmv-primary);
}

/* ---------------------------
   CARDS / SECCIONES
--------------------------- */
.hmv-card{
  background: var(--hmv-card);
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  box-shadow: var(--hmv-shadow);
  overflow: hidden;
}

.hmv-card-header{
  padding: 16px;
  border-bottom: 1px solid var(--hmv-border);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hmv-card-body{ padding: 16px; }

.hmv-section{
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  padding: 14px;
  background: #fff;
  margin-bottom: 14px;
}

.hmv-section-title{
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: .2px;
}

.hmv-callout{
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  background: linear-gradient(180deg, rgba(237,227,241,.45), rgba(255,255,255,1));
  padding: 12px 14px;
}

/* ---------------------------
   INPUTS
--------------------------- */
input, select, textarea{
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius-sm);
  padding: 10px 12px;
  outline: none;
  background:#fff;
  width: 100%;
}

input:focus, select:focus, textarea:focus{
  border-color: var(--hmv-primary);
  box-shadow: 0 0 0 3px rgba(90, 29, 109, .12);
}

/* badges */
.badge-hmv{
  display:inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--hmv-lavender);
  color: var(--hmv-primary);
  font-weight: 900;
  font-size: 12px;
}

/* ---------------------------
   TABLA HMV
--------------------------- */
.table-hmv{
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  overflow: hidden;
}

.table-hmv thead th{
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
  text-align: left;
}

.table-hmv tbody td{
  padding: 12px 14px;
  border-top: 1px solid var(--hmv-border);
  vertical-align: middle;
}

.table-hmv tbody tr:hover{
  background: rgba(90, 29, 109, 0.04);
}

/* ---------------------------
   UTILIDADES PRO
--------------------------- */
.hmv-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.hmv-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.hmv-table-wrap{
  width:100%;
  overflow-x:auto;
}

/* Botón pequeño */
.hmv-btn-sm{
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--hmv-border);
  background: #fff;
  color: var(--hmv-gray);
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hmv-btn-sm:hover{
  background: var(--hmv-lavender);
  border-color: var(--hmv-primary);
  color: var(--hmv-primary);
}

/* Imagen mini */
.hmv-thumb{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--hmv-border);
}

/* Stock bajo */
.hmv-stock-low{
  font-weight: 900;
  background: rgba(180, 35, 24, .06);
}

/* Badges semánticos */
.badge-hmv.hmv-badge-danger{
  background: rgba(180, 35, 24, .10);
  color: var(--hmv-danger);
}
.badge-hmv.hmv-badge-success{
  background: rgba(2, 122, 72, .10);
  color: var(--hmv-success);
}

/* ---------------------------
   FORM / GRID PRO (sin Bootstrap)
--------------------------- */
.hmv-form-grid{
  display:grid;
  gap:12px;
}

.hmv-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hmv-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hmv-field label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;
}

.hmv-help{
  font-size: 12px;
  color: var(--hmv-muted);
  margin-top: 6px;
  line-height: 1.25;
}

.hmv-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--hmv-border);
  border-radius: var(--hmv-radius-sm);
  background:#fff;
}

.hmv-checkbox input{
  width: 18px;
  height: 18px;
}

.hmv-divider{
  height:1px;
  background: var(--hmv-border);
  margin: 12px 0;
}

/* Responsive */
@media (max-width: 900px){
  .hmv-cols-2, .hmv-cols-3{ grid-template-columns: 1fr; }
}

@media (max-width: 576px){
  .hmv-topbar-inner{ padding: 12px 10px; }
  .hmv-logo{ height: 40px; }
  .hmv-card-header{
    flex-direction: column;
    align-items: stretch;
  }

  .hmv-topbar::after{
    width: 120px;
    height: 34px;
    opacity: 0.04;
  }
}

/* =========================
   DASHBOARD (mobile-first)
========================= */
.dash-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.dash-head{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dash-clock{
  font-size:30px;
  font-weight:900;
  letter-spacing:.5px;
}
.dash-date{
  color: var(--hmv-muted);
  margin-top:2px;
}
.dash-muted{
  color: var(--hmv-muted);
  font-size:12px;
  margin-top:6px;
}

.dash-quick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dash-next-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: var(--hmv-card);
  border:1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  padding:14px;
  box-shadow: var(--hmv-shadow);
}
.dash-next-name{ font-weight:900; font-size:16px; }
.dash-next-meta{ color: var(--hmv-muted); font-size:12px; margin-top:2px; }
.dash-next-empty{
  background: var(--hmv-card);
  border:1px dashed var(--hmv-border);
  border-radius: var(--hmv-radius);
  padding:14px;
  color: var(--hmv-muted);
}

.dash-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.dash-stat{
  background: var(--hmv-card);
  border:1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  padding:14px;
  box-shadow: var(--hmv-shadow);
}
.dash-stat-label{ color: var(--hmv-muted); font-size:12px; }
.dash-stat-value{ font-size:28px; font-weight:900; margin-top:6px; }
.dash-stat-sub{ color: var(--hmv-muted); font-size:12px; margin-top:6px; }
.dash-stat-hint{ color: var(--hmv-muted); font-size:12px; margin-top:10px; }

.dash-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.dash-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background: var(--hmv-card);
  border:1px solid var(--hmv-border);
  border-radius: var(--hmv-radius);
  padding:14px;
  box-shadow: var(--hmv-shadow);
}

.dash-card-title{ font-weight:900; font-size:16px; }
.dash-card-desc{ color: var(--hmv-muted); font-size:12px; margin-top:6px; }
.dash-card-foot{ color: var(--hmv-muted); font-size:12px; margin-top:10px; }

.dash-card--ghost{
  border-style:dashed;
  box-shadow:none;
}

/* Tablet+ */
@media (min-width: 768px){
  .dash-head{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
  }
  .dash-grid{ grid-template-columns: 1fr 1fr; }
  .dash-stats{ grid-template-columns: 1fr 1fr 1fr; }
}
/* =========================
   TOPBAR: Mobile PRO (final)
========================= */

/* En desktop: ya estás bien con flex-wrap */
.hmv-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
  /* Ocultar scrollbar horizontal (sensación app) */
  .hmv-topbar-actions{
    scrollbar-width: none;           /* Firefox */
  }

  .hmv-topbar-actions::-webkit-scrollbar{
    display: none;                   /* Chrome / Safari */
  }


/* En móvil: menú tipo “fila deslizable” + CTA pegado */
@media (max-width: 768px){
  .hmv-topbar-inner{
    align-items:flex-start;
  }

  /* Brand arriba, acciones abajo */
  .hmv-topbar-inner{
    flex-direction: column;
  }

  .hmv-topbar-actions{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    display:flex;
    flex-wrap:nowrap;          /* clave para que no se vayan abajo */
    gap:10px;
    padding-bottom:8px;
  }

  .hmv-topbar-actions a{
    white-space:nowrap;
    flex: 0 0 auto;
  }

  /* CTA + Agregar siempre visible al final de la fila */
  .hmv-cta{
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -10px 0 14px rgba(247,248,250,.85); /* “velo” suave al fondo */
  }

  /* Que el watermark no estorbe visualmente en móvil */
  .hmv-topbar::after{
    opacity: 0.03;
  }
}

/* =========================
   DASHBOARD: Micro ajustes PRO
========================= */

/* En móvil, los botones rápidos que respiren */
@media (max-width: 576px){
  .dash-quick a{
    width: 100%;
    justify-content:center;
  }

  .dash-next-card{
    flex-direction: column;
    align-items: stretch;
  }

  .dash-next-card a{
    width:100%;
    justify-content:center;
  }
}
.map-placeholder{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.map-text{
  font-size: 15px;
  font-weight: 600;
  color: var(--hmv-gray);
  line-height: 1.4;
}

.map-link{
  align-self: flex-start;
  font-weight: 700;
  color: var(--hmv-primary);
  text-decoration: none;
}

.map-link:hover{
  text-decoration: underline;
}

.map-iframe iframe{
  box-shadow: var(--hmv-shadow);
}
/* Card del mapa */
.map-card.full-map{
  border: 2px dashed #e5d9ee;       /* punteado */
  border-radius: 20px;
  overflow: hidden;                /* CLAVE */
  height: 320px;                   /* ajusta si quieres */
  background: #fff;
  padding: 0;                      /* CLAVE */
}

/* Iframe ocupa TODO */
.map-card.full-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hmv-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

.hmv-hero {
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 22px;
}

.hmv-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  color: #6b7280;
}

.hmv-hero h1 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.1;
}

.hmv-subtitle {
  margin: 0;
  color: #667085;
}

.hmv-grid-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.hmv-action-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 20px;
  padding: 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hmv-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.hmv-action-card--muted {
  opacity: .92;
}

.hmv-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f4efff;
  font-size: 22px;
}

.hmv-action-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.hmv-action-card p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.4;
}

.hmv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.hmv-kpi-card {
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 20px;
  padding: 20px;
}

.hmv-kpi-label {
  display: block;
  color: #667085;
  font-size: 14px;
  margin-bottom: 8px;
}

.hmv-kpi-value {
  display: block;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}

.hmv-kpi-note {
  margin: 0;
  color: #667085;
  font-size: 13px;
}

.hmv-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.hmv-panel {
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 20px;
  padding: 20px;
}

.hmv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hmv-panel-head h2 {
  margin: 0;
  font-size: 20px;
}

.hmv-link {
  color: #6c2aa6;
  text-decoration: none;
  font-weight: 600;
}

.hmv-table-wrap {
  overflow-x: auto;
}

.hmv-table {
  width: 100%;
  border-collapse: collapse;
}

.hmv-table th,
.hmv-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid #ececf3;
  font-size: 14px;
}

.hmv-checklist {
  margin: 0;
  padding-left: 18px;
}

.hmv-checklist li {
  margin-bottom: 10px;
  color: #344054;
}

.hmv-empty {
  padding: 20px 0;
  color: #667085;
}

@media (max-width: 980px) {
  .hmv-grid-actions,
  .hmv-kpi-grid,
  .hmv-two-col {
    grid-template-columns: 1fr;
  }
}
/* Compat nuevos módulos */
:root {
  --hmv-accent: var(--hmv-primary);
  --hmv-text: var(--hmv-gray);
  --hmv-surface: #fff;
}
/* =========================
   COLORIMETRÍA DE ROLES
========================= */
.role-chip {
  display: inline-block;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.role-admin            { background:#EDE9FE; color:#5B21B6; }
.role-direccion        { background:#DBEAFE; color:#1D4ED8; }
.role-recepcion        { background:#CCFBF1; color:#0F766E; }
.role-farmacia         { background:#D1FAE5; color:#047857; }
.role-almacen          { background:#FEF3C7; color:#B45309; }
.role-quirofano        { background:#FEE2E2; color:#B91C1C; }
.role-guardia          { background:#E0F2FE; color:#0369A1; }
.role-enfermeria       { background:#FCE7F3; color:#9D174D; }
.role-medico           { background:#EFF6FF; color:#1D4ED8; }
.role-secretaria       { background:#F3E8FF; color:#7C3AED; }
.role-coord_consultorios { background:#E9D5FF; color:#6D28D9; }
.role-intendencia      { background:#FEF9C3; color:#92400E; }
.role-mantenimiento    { background:#F1F5F9; color:#475569; }
.role-estacionamiento  { background:#CFFAFE; color:#0E7490; }
.role-laboratorio      { background:#EEF2FF; color:#4338CA; }
.role-rh               { background:#FDF2F8; color:#BE185D; }
.role-cocina           { background:#FFF7ED; color:#C2410C; }
.role-lavanderia       { background:#F0F9FF; color:#0284C7; }
.role-default          { background:#F3F4F6; color:#374151; }

/* =========================
   HAMBURGER MENU (móvil)
========================= */
.hmv-topbar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hmv-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1.5px solid var(--hmv-border);
  border-radius: 10px;
  cursor: pointer;
  padding: 7px 8px;
  flex-shrink: 0;
}
.hmv-hamburger span {
  display: block;
  height: 2px;
  background: var(--hmv-primary);
  border-radius: 2px;
  transition: all .2s;
}

@media (max-width: 768px) {
  .hmv-topbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hmv-hamburger {
    display: flex;
  }

  /* Nav oculto por defecto en móvil */
  #hmv-nav {
    display: none !important;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 6px;
    width: 100%;
  }

  /* Cuando el hamburger lo activa */
  #hmv-nav.hmv-nav-open {
    display: flex !important;
  }

  #hmv-nav a {
    white-space: nowrap;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 10px;
  }

  /* Ítems del menú usuario y notificaciones al final */
  #hmv-nav > div,
  #hmv-nav > form {
    width: 100%;
  }
}