/* =========================== Colores de marca =========================== */
:root{
  /* Logo Visibilidad Médica */
  --brand-primary:#115989;   /* Azul principal (botones) */
  --brand-secondary:#509A44; /* Verde (confirmaciones / success) */
  --brand-accent:#1DA0AF;    /* Turquesa (acento) */

  --brand-dark:#0B1F2E;      /* Texto oscuro */
  --brand-black:#000000;

  --brand-bg:#f6f8fb;        /* Fondo suave */
  --brand-border:#e5e7eb;

  --radius-card:18px;
  --radius-input:14px;
}

/* =========================== Base =========================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-color:var(--brand-bg);
  color:var(--brand-dark);
}

img, video, svg, canvas{ max-width:100%; height:auto; }

/* =========================== Layout shell =========================== */
.app-shell, .app-container{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
  padding-top:1rem;
  padding-bottom:1.5rem;
}

@media (max-width:768px){
  .app-shell, .app-container{
    padding-left:max(.85rem, env(safe-area-inset-left));
    padding-right:max(.85rem, env(safe-area-inset-right));
    padding-top:.85rem;
  }
}

/* =========================== Header / Navbar =========================== */
.app-navbar{
  background:#ffffff;
  border-bottom:1px solid var(--brand-border);
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
  padding-top:.75rem;
  padding-bottom:.75rem;

  flex-wrap:wrap;
  gap:.75rem;
}

@media (max-width:768px){
  .app-navbar{
    padding-left:max(.85rem, env(safe-area-inset-left));
    padding-right:max(.85rem, env(safe-area-inset-right));
  }
}

.app-navbar__left{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.app-navbar__logo{ height:32px; }
.app-navbar__brand{
  font-weight:800;
  font-size:1.05rem;
  color:var(--brand-primary);
}

.app-navbar__menu{
  display:flex;
  gap:.4rem;
  align-items:center;
  flex-wrap:wrap;
  margin-left:.8rem;
}

.app-navbar__user{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  font-size:.9rem;
}

.app-navbar__user-name{
  padding:.25rem .75rem;
  border-radius:999px;
  background:rgba(29,160,175,.12);
  color:var(--brand-primary);
  font-weight:800;
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:768px){
  .app-navbar__user-name{ max-width:140px; }
}

/* =========================== Botones =========================== */
.btn-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.2rem;
  border-radius:999px;
  border:none;
  background:var(--brand-primary);
  color:#fff;
  font-size:.95rem;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
  white-space:nowrap;
}

.btn-brand:hover{
  filter:brightness(.95);
  box-shadow:0 10px 22px rgba(17,89,137,.22);
  transform:translateY(-1px);
}

@media (max-width:768px){
  .btn-brand{ padding:.5rem .9rem; font-size:.92rem; }
}

/* Helpers por si quieres variantes */
.btn-brand.is-success{ background:var(--brand-secondary) !important; }
.btn-brand.is-accent{ background:var(--brand-accent) !important; }
.btn-brand.is-dark{ background:#111827 !important; }
.btn-brand.is-ghost{
  background:#fff !important;
  color:var(--brand-dark) !important;
  border:1px solid var(--brand-border) !important;
}

/* =========================== Menú hamburguesa =========================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.app-nav-toggle{
  display:none;
  border:1px solid var(--brand-border);
  background:#fff;
  border-radius:999px;
  padding:.45rem .75rem;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
}

@media (max-width:768px){
  .app-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .app-navbar__menu{
    width:100%;
    margin-left:0;
    display:none !important;
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
    padding-top:.5rem;
  }

  .app-navbar__menu.is-open{
    display:flex !important;
  }

  .app-navbar__menu .btn-brand{
    width:100%;
    justify-content:center;
    padding:.55rem .9rem;
  }
}

/* =========================== Dashboard / Perfil =========================== */
.dashboard-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}

@media (min-width:900px){
  .dashboard-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    align-items:flex-start;
  }
}

.dashboard-card{
  background:#fff;
  border-radius:.9rem;
  padding:1.3rem;
  box-shadow:0 14px 30px rgba(0,0,0,.04);
  border:1px solid #e3e3ec;
}

.dashboard-card-title{
  font-size:1.05rem;
  font-weight:900;
  margin-bottom:.75rem;
  color:#000;
}

.dashboard-fields{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:.5rem;
}

.dashboard-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.95rem;
}

.dashboard-label{ font-weight:800; color:#555560; }
.dashboard-value{ font-weight:600; color:#22222a; text-align:right; }

@media (max-width:520px){
  .dashboard-row{ flex-direction:column; align-items:flex-start; gap:.15rem; }
  .dashboard-value{ text-align:left; width:100%; overflow-wrap:anywhere; }
}

/* =========================== Tablas =========================== */
.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table{ width:100%; border-collapse:separate; border-spacing:0; }
th, td{ text-align:left; padding:.65rem .6rem; border-bottom:1px solid #eef2f7; vertical-align:top; }
th{ font-size:.85rem; color:#64748b; font-weight:900; }
td{ color:#111827; font-size:.92rem; }

/* Inputs/controles largos */
input, select, textarea, button{ max-width:100%; }

/* Fix paginación Laravel (flechas gigantes) */
.pagination-wrap nav svg, .pagination-wrap svg{ width:16px !important; height:16px !important; }
.pagination-wrap nav a, .pagination-wrap nav span{
  font-size:.85rem !important;
  line-height:1 !important;
  padding:.35rem .6rem !important;
}
.pagination-wrap nav a.btn-brand{ padding:.35rem .6rem !important; }

/* ===========================
   "CUADRO BONITO" + INPUTS ALINEADOS (solo dentro de <main>)
   =========================== */
main form{
  background:#fff;
  border:1px solid #e3e3ec;
  border-radius:var(--radius-card);
  padding:1.25rem;
  box-shadow:0 14px 30px rgba(0,0,0,.04);
}

main form > * + *{ margin-top:.9rem; }

/* ✅ Inputs alineados: misma altura/padding/line-height */
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
main select,
main textarea{
  appearance:none;
  -webkit-appearance:none;

  width:100%;
  max-width:100%;
  box-sizing:border-box;

  padding:.65rem .85rem;
  border:1px solid #d3d3d9;
  border-radius:var(--radius-input);
  background:#fff;
  color:var(--brand-dark);
  font-size:.95rem;
  line-height:1.25;

  outline:none;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
}

main select{ min-height:44px; }
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){ min-height:44px; }

main textarea{
  min-height:110px;
  resize:vertical;
}

main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
main select:focus,
main textarea:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(17,89,137,.16);
}

@media (max-width:768px){
  main form{ padding:1rem; border-radius:16px; }
}

/* =========================== Footer =========================== */
.app-footer{
  padding:.8rem 1rem 1.2rem;
  text-align:center;
  font-size:.85rem;
  color:#fff;
  background:#000;
  border-top:none;
}
.app-footer a{ color:var(--brand-accent); text-decoration:none; }
.app-footer a:hover{ text-decoration:underline; }

/* ===========================
   MOBILE GLOBAL (admin + client)
   =========================== */
@media (max-width: 768px){

  .app-navbar{
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-start;
  }

  .app-navbar__left{
    width: 100%;
    flex-wrap: wrap;
    gap: .6rem;
  }

  .app-nav-toggle{
    display: inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  .app-navbar__menu{
    width: 100%;
    margin-left: 0;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding-top: .25rem;
  }
  .app-navbar__menu.is-open{
    display: flex !important;
  }

  .app-navbar__menu .btn-brand{
    width: 100%;
    justify-content: center;
    padding: .55rem .9rem;
    white-space: nowrap;
  }

  .app-navbar__user{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }
  .app-navbar__user form{
    margin: 0;
    display: inline-flex;
  }

  .app-navbar__user a.btn-brand,
  .app-navbar__user form{
    flex: 1 1 calc(50% - .45rem);
  }
  .app-navbar__user a.btn-brand,
  .app-navbar__user form button.btn-brand{
    width: 100%;
    justify-content: center;
  }

  .app-navbar__user .btn-brand{
    padding: .4rem .65rem !important;
    font-size: .88rem !important;
    white-space: nowrap;
  }
}

/* Tablas: evitar que “se salgan” en móvil */
@media (max-width: 768px){
  .app-shell table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-shell thead, .app-shell tbody, .app-shell tr{
    width: 100%;
  }
}

/* ===== Menu + user actions inside mobile drawer ===== */
.app-navbar__menu-user{
  display:none;
}

.btn-icon{
  position: relative;
  gap: .5rem;
}

.btn-icon .icon{
  font-size: 1.05rem;
  line-height: 1;
}

.btn-icon .label{
  font-weight: 900;
}

.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background:#ef4444;
  color:#fff;
  border-radius:999px;
  padding:0 5px;
}

.logout-form{ margin:0; }

/* Mobile drawer */
@media (max-width: 768px){
  .app-navbar__user--desktop{ display:none !important; }

  .app-navbar__menu{
    width:100%;
    display:none !important;
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    padding-top:.25rem;
  }

  .app-navbar__menu.is-open{ display:flex !important; }

  .app-navbar__menu-links,
  .app-navbar__menu-user{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }

  .app-navbar__menu-user{
    display:flex;
    padding-top:.25rem;
    border-top:1px solid var(--brand-border);
    margin-top:.25rem;
  }

  .app-navbar__menu .btn-brand{
    width:100%;
    justify-content:center;
    padding:.6rem .9rem;
    font-size:.95rem;
    white-space:nowrap;
  }

  .app-navbar__menu-user .btn-brand{
    justify-content:flex-start;
  }

  @media (max-width: 380px){
    .app-navbar__menu-user .btn-icon .label{ display:none; }
    .app-navbar__menu-user .btn-brand{ justify-content:center; }
  }
}
/* ===== Variantes globales de botones (sin inline styles) ===== */
.btn-brand.is-dark{ background:#111827 !important; }
.btn-brand.is-success{ background:var(--brand-accent) !important; } /* verde del logo */
.btn-brand.is-accent{ background:var(--brand-primary) !important; }  /* turquesa */
.btn-brand.btn-ghost{
  background:#fff !important;
  color:var(--brand-dark) !important;
  border:1px solid var(--brand-border) !important;
  box-shadow:none !important;
}
.btn-brand.btn-ghost:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

/* ===== Icon buttons: usan marca global ===== */
.icon-primary{ background:var(--brand-primary) !important; color:#fff !important; }
.icon-success{ background:var(--brand-accent) !important; color:#fff !important; }
.icon-muted{ background:#64748b !important; color:#fff !important; }
.icon-danger{ background:#dc2626 !important; color:#fff !important; }

/* ===== Notion-ish cards / borders (suave) ===== */
.dashboard-card{
  border:1px solid var(--brand-border) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.04) !important;
}

/* ===== Inputs alineados global (si tu auth-input ya existe) ===== */
.auth-input{
  width:100%;
  min-height:44px;
  line-height:1.25;
  box-sizing:border-box;
}
textarea.auth-input{
  min-height:110px;
}