/* app.css - estilos globales MEDIDENT */
:root{
    --primary:#1976d2;
    --primary-dark:#145ca3;

    --success:#388e3c;
    --success-dark:#2e7d32;

    --pdf:#16a34a;

    --bg:#f4f6f9;
    --card:#ffffff;
    --muted:#555;
    --border:#e0e0e0;

    --text:#111827;
    --shadow:0 2px 8px rgba(0,0,0,0.10);

    --navy:#1f2b5f;
    --navy-dark:#16204a;
    --navy-hover:#2a3a7a;
    --text-light:#f5f7ff;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
    font-family: Arial, sans-serif;
    background-color: var(--bg);
    margin:0;
    color:var(--text);
}

/* ✅ Bloquear scroll cuando el drawer está abierto (móvil) */
body.sidebar-open{
    overflow: hidden;
}

/* =========================
   Layout Dashboard (sidebar)
   ========================= */

.layout{
    display:flex;
    min-height:100vh;
}

.sidebar{
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: var(--text-light);
    width:72px;
    transition: width 180ms ease, transform 180ms ease;
    position:sticky;
    top:0;
    height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 10px rgba(0,0,0,0.12);
}

/* Hover para desktop */
@media (hover:hover) and (pointer:fine){
    .sidebar:hover{ width:236px; }
    .sidebar:hover .sidebar-text{ opacity:1; transform:none; }
}

/* Toggle por click */
.sidebar.expanded{ width:236px; }
.sidebar.expanded .sidebar-text{ opacity:1; transform:none; }

.sidebar-header{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 14px;
    border-bottom:1px solid rgba(255,255,255,0.10);
}

.burger{
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.08);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.burger:hover{ background: rgba(255,255,255,0.08); }

.sidebar-nav{ padding:10px 8px; }

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 12px;
    border-radius:12px;
    color: var(--text-light);
    text-decoration:none;
    margin:6px 6px;
    transition: background 140ms ease, transform 140ms ease;
}
.nav-item:hover{
    background: rgba(255,255,255,0.10);
    transform: translateX(2px);
}
.nav-icon{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.95;
}
.nav-icon svg{ width:22px; height:22px; fill: currentColor; }

.sidebar-text{
    white-space:nowrap;
    font-size:0.95rem;
    opacity:0;
    transform: translateX(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.main{
    flex:1;
    min-width:0;
}

/* =========================
   Topbar
   ========================= */

.topbar{
    background:#fff;
    padding:12px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--border);
}

.burger-topbar{
    border:1px solid var(--border);
    background:#fff;
    color:#111827;
}

/* ✅ Unificado: topbar burger solo visible en móvil (<=980) */
@media (min-width: 981px){
    .burger-topbar{ display:none; }
}

/* =========================
   Responsive: sidebar tipo drawer
   ========================= */

/* ✅ Unificado: drawer en <=980 */
@media (max-width: 980px){
    .sidebar{
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        z-index:60;
        transform: translateX(-100%);
        width:236px;
        height:100dvh;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.expanded{
        transform: translateX(0);
        width:236px;
    }

    .sidebar-text{ opacity:1; transform:none; }
    .layout{ display:block; }
    .main{ margin-left:0; }

    .backdrop{
        position:fixed;
        inset:0;
        background: rgba(0,0,0,0.35);
        display:none;
        z-index:55;
    }
    .backdrop.show{ display:block; }
}

/* Navbar legacy (si se usa en alguna vista vieja) */
.navbar{
    background-color: var(--primary);
    color:#fff;
    padding:10px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.navbar-brand{ font-weight:bold; font-size:1.1rem; }
.navbar-links a{
    color:#fff; text-decoration:none; margin-left:16px; font-size:0.9rem;
}
.navbar-links a:hover{ text-decoration:underline; }

.link-button{
    background:none; border:none; padding:0; margin-left:16px;
    color:#fff; cursor:pointer; font-size:0.9rem; font-family:inherit;
}
.link-button:hover{ text-decoration:underline; }

/* =========================
   Page container / Cards
   ========================= */

.page, .page-container{ padding:24px; }

.page-container{
    max-width: 1100px;
    margin: 0 auto;
}

.card{
    margin:0 auto;
    background-color: var(--card);
    border-radius:12px;
    padding:20px;
    box-shadow: var(--shadow);
}
.card-xl{
    border-radius:16px;
}

h1,h2,h3{ margin-top:0; }

/* =========================
   Tables
   ========================= */

.table{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
    font-size:0.95rem;
}
.table th,.table td{
    border-bottom:1px solid var(--border);
    padding:8px;
    text-align:left;
}
.table th{ background-color:#f8f8f8; }

.table-wrap{ margin-top:10px; overflow:auto; }

.top-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

/* =========================
   Buttons
   ========================= */
/* (resto del archivo igual al tuyo; no lo toqué más) */

.btn-edit{
    background:#fff;
    color: var(--primary) !important;
    border:1px solid rgba(25,118,210,0.35);
    font-weight:600;
}
.btn-edit:hover{
    background:#f8fbff;
    border-color: rgba(25,118,210,0.55);
}

.btn{
    padding:6px 12px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    font-size:0.85rem;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-weight:500; /* sin negrita fuerte */
}

.btn-primary{ background-color: var(--primary); color:#fff; }
.btn-primary:hover{ background-color: var(--primary-dark); }

.btn-success{ background-color: var(--success); color:#fff; }
.btn-success:hover{ background-color: var(--success-dark); }

.btn-secondary{ background-color:#e0e0e0; color:#333; }
.btn-secondary:hover{ background-color:#d5d5d5; }

.btn-outline{
    background:#fff; color:#333; border:1px solid #9e9e9e;
}
.btn-outline:hover{ background:#f5f5f5; }

.btn-danger-small{
    padding:4px 10px;
    border-radius:4px;
    border:none;
    background-color:#e53935;
    color:#fff;
    cursor:pointer;
    font-size:0.8rem;
}
.btn-danger-small:hover{ background-color:#c62828; }

.btn-info{
    background: #38bdf8;
    color: #fff;
    border: 1px solid #38bdf8;
}
.btn-info:hover { filter: brightness(0.95); }

.actions{
    margin-top:16px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.header-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.module-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* Botones universales: Volver + PDF (sin negrita) */
.btn-back{
    background: var(--primary);
    color: #fff !important;
    border: 1px solid transparent;
    font-weight:500;
}
.btn-back:hover{ filter: brightness(.95); }

.btn-pdf{
    background: var(--pdf);
    color: #fff !important;
    border: 1px solid transparent;
    font-weight:500;
}
.btn-pdf:hover{ filter: brightness(.95); }


.btn-link{
    background:transparent;
    border:1px solid transparent;
    color: var(--primary);
    font-weight:700;
}
.btn-link:hover{ text-decoration: underline; }

.btn-danger{
    background:#ef4444;
    color:#fff;
    border:1px solid #ef4444;
}
.btn-danger:hover{ filter: brightness(0.95); }

/* =========================
   Filters
   ========================= */

.filter-form{
    margin-top:8px;
    margin-bottom:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    font-size:0.85rem;
}
.filter-form input[type="text"]{
    padding:4px 6px;
    min-width:180px;
}

.small-note{ font-size:0.8rem; color:#777; }

/* =========================
   Miniaturas legacy
   ========================= */

.thumbnail-img{
    max-width:220px;
    max-height:220px;
    border-radius:6px;
    margin-top:6px;
    border:1px solid #ddd;
    cursor:pointer;
}
.thumb-actions{
    margin-top:4px;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

/* =========================
   Tabs legacy (si se usan)
   ========================= */

.tabs{
    display:flex;
    border-bottom:1px solid var(--border);
    margin-bottom:16px;
    overflow-x:auto;
}
.tab-button{
    background:transparent;
    border:none;
    padding:10px 16px;
    cursor:pointer;
    font-size:0.9rem;
    white-space:nowrap;
}
.tab-button.active{
    border-bottom:3px solid var(--primary);
    font-weight:bold;
}
.tab-content{ display:none; font-size:0.9rem; }

/* =========================
   Inputs globales
   ========================= */

label{ display:block; margin-top:8px; }

input, textarea, select{
    width:100%;
    padding:10px 12px;
    margin-top:6px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    outline:none;
}

input:focus, textarea:focus, select:focus{
    border-color: rgba(25,118,210,0.45);
    box-shadow: 0 0 0 3px rgba(25,118,210,0.10);
}

textarea{ min-height:80px; resize:vertical; }

.inline-inputs{ display:flex; gap:12px; }
.inline-inputs > div{ flex:1; }

.inline-inputs-5{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
}

/* =========================
   Grids usados por Atencion
   (esto faltaba en tu CSS)
   ========================= */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.span2{ grid-column:1 / -1; }

@media (max-width: 860px){
    .form-grid{ grid-template-columns:1fr; }
    .inline-inputs{ flex-direction:column; }
    .inline-inputs-5{ grid-template-columns:repeat(2, 1fr); }
}

/* =========================
   Citas: acciones 2x2 en tabla
   ========================= */

.acciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.acciones-grid a,
.acciones-grid button,
.acciones-grid form { width: 100%; }

.acciones-grid form { margin: 0; }

/* =========================
   Estado como dropdown “pill”
   ========================= */

.estado-select {
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    background: #fff;
    min-width: 160px;
    width: auto;
}
.estado-select.estado-pendiente {
    background: #fffbe6;
    border-color: #ffe58f;
    color: #d48806;
}
.estado-select.estado-atendida {
    background: #f6ffed;
    border-color: #b7eb8f;
    color: #389e0d;
}
.estado-select.estado-cancelada {
    background: #fff1f0;
    border-color: #ffa39e;
    color: #cf1322;
}

/* Extras necesarios para Citas */
.select{
    width:auto;
    min-width:240px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    margin-top:0;
}

/* =========================
   Header canonico de pagina
   ========================= */

.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.page-title{
    font-size:40px;
    margin:0;
}
.page-subtitle{
    margin:6px 0 0;
    color:#6b7280;
    font-weight:400;
}

/* =========================
   Tabs links (principal + subtabs)
   - Principal: sombra azul
   - Subtabs: sombra verde (PDF)
   ========================= */

.tabs-links{
    display:flex;
    gap:22px;
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.tab-link{
    text-decoration:none;
    color:var(--text);
    padding:10px 4px;
    font-weight:500;
}
.tab-link.is-active{
    border-bottom:3px solid var(--primary);
    font-weight:600;
    border-radius:12px;
    box-shadow: inset 0 -12px 0 rgba(25,118,210,0.10);
}

.subtabs-links{
    display:flex;
    gap:22px;
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.subtab-link{
    text-decoration:none;
    color:var(--text);
    padding:10px 4px;
    font-weight:500;
}
.subtab-link.is-active{
    border-bottom:3px solid var(--pdf);
    font-weight:600;
    border-radius:12px;
    box-shadow: inset 0 -12px 0 rgba(22,163,74,0.10);
}

.empty-state{
    text-align:center;
    color:#64748b;
    padding:22px;
}

/* =========================
   Secciones internas (Atencion)
   - "shadow" para ubicar donde estas
   ========================= */

.section-box{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    box-shadow: var(--shadow);
    margin-top:14px;
}

.section-title{
    font-weight:700;
    font-size:16px;
    margin:0 0 12px 0;
}

.section-subtitle{
    font-weight:700;
    color:#111827;
}

/* =========================
   Archivos / imagenes (grid + mini preview)
   - 2 columnas, cards con miniatura
   ========================= */

.file-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
@media (max-width: 900px){
    .file-grid{ grid-template-columns:1fr; }
}

.file-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow: var(--shadow);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.file-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.file-title{
    font-weight:700;
}
.file-meta{
    color:#64748b;
    font-weight:500;
    font-size:12px;
    margin-top:2px;
}

.preview-box{
    width:100%;
    height:150px;
    border:1px dashed var(--border);
    border-radius:12px;
    background:#f8fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.preview-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.preview-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#64748b;
    font-weight:600;
    text-align:center;
    padding:10px;
}

.file-open{
    text-decoration:none;
    font-weight:600;
    color:var(--primary);
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    white-space:nowrap;
}
.file-open:hover{
    border-color:#cbd5e1;
    background:#f8fafc;
}

/* =========================
   Pacientes - Search row
   ========================= */
.search-row{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:8px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.search-input{
    flex:1;
    min-width:260px;
}
.search-actions{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

/* =========================
   Tab links: activo real
   ========================= */
.tab-link.is-active{
    border-bottom:3px solid var(--primary);
    font-weight:600;
}
.subtab-link.is-active{
    border-bottom:3px solid var(--primary);
    font-weight:600;
}

/* =========================
   Tabla acciones centradas
   ========================= */
.th-actions{ text-align:center; min-width:220px; }
.td-actions{ text-align:center; }

.row-actions{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}

/* Boton Editar (blanco + letras azules) */
.btn-edit{
    background:#fff;
    border:1px solid var(--primary);
    color:var(--primary) !important;
    font-weight:600;
}
.btn-edit:hover{
    background:#f5f9ff;
}

/* =========================
   Secciones / grids (si no existen)
   ========================= */
.section-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.section-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.section-badge{
    background:#eef2ff;
    color:#3730a3;
    border:1px solid #e0e7ff;
    font-weight:700;
    padding:6px 10px;
    border-radius:999px;
    font-size:0.80rem;
}
.section-title{
    font-weight:800;
    color:#111827;
}

/* Grid de formularios */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
.form-grid .span2{
    grid-column: span 2;
}
@media (max-width: 720px){
    .form-grid{ grid-template-columns:1fr; }
    .form-grid .span2{ grid-column: span 1; }
}
/* =========================
   Alerts (mensajes flash)
   ========================= */
.alert{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:12px 14px;
    margin:12px 0;
    box-shadow: var(--shadow);
    font-weight:600;
}

.alert-success{
    border-color: rgba(56,142,60,0.35);
    background: rgba(56,142,60,0.08);
    color: var(--success-dark);
}

.alert-danger{
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
    color:#b91c1c;
}

.alert-info{
    border-color: rgba(25,118,210,0.35);
    background: rgba(25,118,210,0.08);
    color: var(--primary-dark);
}
/* =========================
   Modal confirmacion (blur)
   ========================= */

body.modal-open{
    overflow: hidden;
}

.modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 200;
}

.modal.is-open{
    display: block;
}

.modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-card{
    position: relative;
    width: min(520px, calc(100% - 28px));
    margin: 12vh auto 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    padding: 18px;
}

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

.modal-title{
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
}

.modal-text{
    margin: 10px 0 0;
    color: #111827;
}

.modal-text.subtle{
    color:#6b7280;
}

.modal-actions{
    margin-top: 16px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap: wrap;
}