/* ════════════════════════════════════════════════════════
   admin.css — Design system módulo Administrar
   Cargado exclusivamente desde layouts/administrar.blade.php
   Ruta: public/css/admin.css
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────── */
:root {
    --a-brand:        #dc2626;
    --a-brand-mid:    #ef4444;
    --a-brand-light:  #fee2e2;
    --a-brand-dark:   #b91c1c;
    --a-surface:      #f8fafc;
    --a-card:         #ffffff;
    --a-border:       #e2e8f0;
    --a-border-2:     #cbd5e1;
    --a-text:         #1e293b;
    --a-muted:        #64748b;
    --a-subtle:       #94a3b8;
    --a-radius:       12px;
    --a-radius-sm:    8px;
    --a-radius-lg:    18px;
    --a-shadow-sm:    0 1px 4px rgba(220,38,38,.07);
    --a-shadow-md:    0 4px 20px rgba(220,38,38,.10);
    --a-shadow-lg:    0 12px 40px rgba(220,38,38,.14);
    --a-font:         'DM Sans', system-ui, sans-serif;
    --a-font-mono:    'DM Mono', 'Fira Mono', monospace;
}

/* ── Base ─────────────────────────────────────────────── */
body { font-family: var(--a-font) !important; background: var(--a-surface); -webkit-font-smoothing: antialiased; }
.a-mono { font-family: var(--a-font-mono); }

/* ════════════════════════════════════════════════════════
   BREADCRUMB — espejo de n-breadcrumb con prefijo a-
════════════════════════════════════════════════════════ */
.a-breadcrumb { display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem; min-height: 28px; }
.a-breadcrumb__trail { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.a-breadcrumb__item {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .74rem; color: var(--a-muted); text-decoration: none;
    padding: .15rem .35rem; border-radius: 6px;
    transition: background .1s, color .1s; white-space: nowrap;
}
.a-breadcrumb__item:hover { background: var(--a-brand-light); color: var(--a-brand); }
.a-breadcrumb__item i { font-size: .65rem; }
.a-breadcrumb__sep { font-size: .58rem; color: var(--a-subtle); user-select: none; padding: 0 .05rem; }
.a-breadcrumb__current {
    font-size: .74rem; font-weight: 600; color: var(--a-text);
    padding: .15rem .35rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.a-breadcrumb__back { display: none; }
.a-breadcrumb--desktop { display: flex; }
@media (max-width: 640px) {
    .a-breadcrumb--desktop { display: none; }
}
.adm-page-title { display: flex; align-items: center; gap: .45rem; }
.adm-page-title i { color: var(--a-brand-mid); }
.adm-page-title__back {
    display: none;
    margin-left: auto;
    padding: .3rem .5rem;
    background: var(--a-brand-light);
    border-radius: var(--a-radius-sm);
    color: var(--a-brand);
    text-decoration: none;
}
.adm-page-title__back:hover { background: var(--a-brand); color: #fff; }
.adm-page-subtitle { font-size: .8rem; color: var(--a-muted); margin: .2rem 0 0; }
@media (max-width: 640px) {
    .adm-page-header { flex-direction: column; gap: .5rem; }
    .adm-page-title { 
        font-size: 1.1rem; 
        display: flex; 
        justify-content: flex-start; 
        width: 100%; 
    }
    .adm-page-title__back { 
        display: inline-flex; 
        margin-left: auto; 
    }
}

/* ════════════════════════════════════════════════════════
   PAGE HEADER — espejo de nutr-page-header con prefijo adm-
════════════════════════════════════════════════════════ */
.adm-page-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.adm-page-header .adm-page-header__main {
    flex: 1;
    min-width: 0;
}
@media (max-width: 640px) {
    .adm-page-header .adm-page-header__main {
        flex: none;
        width: 100%;
    }
}

.adm-page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: var(--a-card);
    border-bottom: 1px solid var(--a-border);
    box-shadow: var(--a-shadow-sm);
    padding: .6rem 1.25rem;
    margin-bottom: 0;
    gap: .4rem;
}

.adm-page-header--sticky + * {
    margin-top: 1.25rem;
}

.adm-page-header--sticky .adm-page-title {
    font-size: 1rem;
    letter-spacing: -.02em;
}
.adm-page-header--sticky .adm-page-subtitle {
    font-size: .75rem;
    margin-top: .1rem;
}

.adm-page-header__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
.adm-page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.adm-page-header__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--a-border);
}

.adm-page-title {
    font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--a-brand); margin: 0; line-height: 1.25;
    display: flex; align-items: center; gap: .45rem;
}
.adm-page-title i { color: var(--a-brand-mid); }
.adm-page-subtitle { font-size: .8rem; color: var(--a-muted); margin: .2rem 0 0; }
@media (max-width: 640px) {
    .adm-page-header  { flex-direction: row; flex-wrap: nowrap; gap: .25rem; align-items: flex-start; }
    .adm-page-title   { font-size: 1.1rem; }
    .adm-page-header__actions { margin-left: auto; flex-shrink: 0; }
    .adm-page-header__toolbar { flex-direction: column; align-items: stretch; }
    .adm-page-header .adm-page-header__main {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .adm-page-header .adm-page-header__main .adm-page-title {
        width: auto !important;
        display: inline-flex !important;
    }
    .adm-page-title__back { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   BOTONES
════════════════════════════════════════════════════════ */
.adm-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .44rem 1rem; border-radius: var(--a-radius-sm);
    font-size: .82rem; font-weight: 700; border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; transition: all .14s;
    line-height: 1; white-space: nowrap; font-family: var(--a-font);
}
.adm-btn--primary       { background: var(--a-brand); color: #fff; border-color: var(--a-brand); }
.adm-btn--primary:hover { background: var(--a-brand-dark); border-color: var(--a-brand-dark); color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,.25); }
.adm-btn--secondary     { background: var(--a-surface); color: var(--a-text); border-color: var(--a-border); }
.adm-btn--secondary:hover { background: var(--a-brand-light); border-color: var(--a-brand); color: var(--a-brand); }
.adm-btn--ghost         { background: var(--a-card); color: var(--a-muted); border-color: var(--a-border); }
.adm-btn--ghost:hover   { border-color: var(--a-brand-mid); color: var(--a-brand); background: var(--a-brand-light); }
.adm-btn--danger        { background: var(--a-brand-light); color: var(--a-brand); border-color: var(--a-brand-light); }
.adm-btn--danger:hover  { background: var(--a-brand); color: #fff; border-color: var(--a-brand); }
.adm-btn--success       { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.adm-btn--success:hover { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.adm-btn--sm { padding: .3rem .7rem; font-size: .76rem; }

/* ════════════════════════════════════════════════════════
   TABLA
════════════════════════════════════════════════════════ */
.adm-table-wrap {
    background: var(--a-card); border: 1.5px solid var(--a-border);
    border-radius: var(--a-radius); box-shadow: var(--a-shadow-sm); overflow: hidden;
}
.adm-table { width: 100%; border-collapse: collapse; }
.adm-th {
    background: var(--a-surface); padding: .6rem 1rem;
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--a-muted);
    border-bottom: 1.5px solid var(--a-border); white-space: nowrap; text-align: left;
}
.adm-th--right { text-align: right; }
.adm-tr { border-bottom: 1px solid var(--a-border); transition: background .08s; }
.adm-tr:last-child { border-bottom: none; }
.adm-tr:hover { background: #fff8f7; }
.adm-tr--today { 
    background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 50%, #fef3c7 100%) !important;
    border-left: 4px solid #f59e0b;
}
.adm-tr--today:hover {
    background: linear-gradient(90deg, #fef3c7 0%, #fff7ed 50%, #fef3c7 100%) !important;
}
.adm-td { padding: .7rem 1rem; font-size: .84rem; color: var(--a-text); vertical-align: middle; }
.adm-td--right { text-align: right; }
/* Round table corners at cell level (overflow:visible on wrapper breaks wrapper border-radius) */
.adm-table thead tr:first-child th:first-child { border-radius: 10px 0 0 0; }
.adm-table thead tr:first-child th:last-child  { border-radius: 0 10px 0 0; }
.adm-table tbody tr:last-child td:first-child  { border-radius: 0 0 0 10px; }
.adm-table tbody tr:last-child td:last-child   { border-radius: 0 0 10px 0; }

/* ════════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════════ */
.adm-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .18rem .6rem; border-radius: 20px;
    font-size: .67rem; font-weight: 700; white-space: nowrap;
}
.adm-badge--role   { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.adm-badge--perm   { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.adm-badge--super  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.adm-badge--active { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.adm-badge--red    { background: var(--a-brand-light); color: var(--a-brand); border: 1px solid #f5c6c2; }

/* ════════════════════════════════════════════════════════
   ROW ACTIONS
════════════════════════════════════════════════════════ */
.adm-row-actions { display: flex; gap: .3rem; align-items: center; }
.adm-row-btn {
    width: 30px; height: 30px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; border: 1.5px solid var(--a-border);
    cursor: pointer; transition: all .12s; text-decoration: none;
    background: var(--a-surface); color: var(--a-muted);
}
.adm-row-btn:hover         { background: var(--a-brand); color: #fff; border-color: var(--a-brand); }
.adm-row-btn--edit:hover   { background: #1a6b45; color: #fff; border-color: #1a6b45; }
.adm-row-btn--delete       { color: var(--a-brand) !important; border-color: #f5c6c2 !important; background: var(--a-brand-light) !important; }
.adm-row-btn--delete:hover { background: var(--a-brand) !important; color: #fff !important; border-color: var(--a-brand) !important; }

/* ════════════════════════════════════════════════════════
   SECCIÓN / FORMULARIO
════════════════════════════════════════════════════════ */
.adm-section {
    background: var(--a-card); border: 1.5px solid var(--a-border);
    border-radius: var(--a-radius); padding: 1.25rem;
    box-shadow: var(--a-shadow-sm); margin-bottom: 1rem;
}
.adm-section-title {
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--a-muted);
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: 1rem; padding-bottom: .65rem;
    border-bottom: 1.5px solid var(--a-border);
}
.adm-section-title i { color: var(--a-brand); }
.adm-form-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.adm-form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.adm-fields-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.adm-field        { display: flex; flex-direction: column; gap: .3rem; }
.adm-field--full  { grid-column: 1 / -1; }
.adm-label { font-size: .76rem; font-weight: 700; color: var(--a-text); }
.adm-req   { color: var(--a-brand); }
.adm-input, .adm-select, .adm-textarea {
    padding: .5rem .9rem; border: 1.5px solid var(--a-border);
    border-radius: var(--a-radius-sm); font-size: .84rem; color: var(--a-text);
    background: var(--a-surface); outline: none;
    transition: border-color .14s, background .14s;
    font-family: var(--a-font); width: 100%;
}
.adm-input:focus, .adm-select:focus, .adm-textarea:focus {
    border-color: var(--a-brand-mid); background: #fff;
    box-shadow: 0 0 0 3px rgba(231,76,60,.08);
}
.adm-input--error { border-color: var(--a-brand) !important; background: #fff8f7; }
.adm-error  { font-size: .73rem; color: var(--a-brand); }
.adm-hint   { font-size: .69rem; color: var(--a-muted); }
.adm-textarea { resize: vertical; min-height: 90px; }

/* ════════════════════════════════════════════════════════
   PERMISSIONS GRID
════════════════════════════════════════════════════════ */
.adm-perm-modules { display: flex; flex-direction: column; gap: .75rem; }
.adm-perm-module  { border: 1.5px solid var(--a-border); border-radius: 10px; overflow: hidden; }
.adm-perm-module-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem .9rem; background: var(--a-surface);
    border-bottom: 1px solid var(--a-border); cursor: pointer; user-select: none;
}
.adm-perm-module-title  { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; color: var(--a-text); }
.adm-perm-module-icon   { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .65rem; flex-shrink: 0; }
.adm-perm-module-count  { font-size: .63rem; color: var(--a-muted); font-weight: 500; margin-left: auto; margin-right: .5rem; }
.adm-perm-module-toggle { color: var(--a-muted); font-size: .62rem; transition: transform .2s; }
.adm-perm-module-toggle.open { transform: rotate(180deg); }
.adm-perm-module-body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: .1rem; padding: .5rem .6rem;
}
.adm-perm-item { display: flex; align-items: center; gap: .5rem; padding: .42rem .55rem; border-radius: 7px; cursor: pointer; transition: background .1s; font-size: .79rem; color: var(--a-text); }
.adm-perm-item:hover { background: var(--a-surface); }
.adm-perm-item input[type="checkbox"] { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--a-border); cursor: pointer; accent-color: var(--a-brand); flex-shrink: 0; }
.adm-perm-check-all { font-size: .68rem; font-weight: 700; color: var(--a-brand); cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

/* ════════════════════════════════════════════════════════
   SHOW PAGE
════════════════════════════════════════════════════════ */
.adm-show-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.adm-show-field { display: flex; flex-direction: column; gap: .2rem; }
.adm-show-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--a-muted); }
.adm-show-value { font-size: .9rem; color: var(--a-text); font-weight: 500; }
.adm-perm-tags  { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }

/* ════════════════════════════════════════════════════════
   AVATAR / COLOR PICKER
════════════════════════════════════════════════════════ */
.adm-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800; color: #fff; flex-shrink: 0; text-transform: uppercase; }
.adm-color-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.adm-color-opt  { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .12s, border-color .12s; }
.adm-color-opt:hover  { transform: scale(1.15); }
.adm-color-opt.active { border-color: var(--a-text); box-shadow: 0 0 0 2px #fff inset; }

/* ════════════════════════════════════════════════════════
   INDEX CARDS
════════════════════════════════════════════════════════ */
.adm-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--a-muted); display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.adm-section-label i { font-size: .62rem; }
.adm-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.adm-index-card { display: flex; align-items: center; gap: .9rem; background: var(--a-card); border: 1.5px solid var(--a-border); border-radius: var(--a-radius); padding: .9rem 1rem; box-shadow: var(--a-shadow-sm); text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s; }
.adm-index-card:hover { box-shadow: var(--a-shadow-md); border-color: var(--a-brand-mid); transform: translateY(-2px); text-decoration: none; }
.adm-index-icon  { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.adm-index-body  { flex: 1; min-width: 0; }
.adm-index-title { font-size: .88rem; font-weight: 700; color: var(--a-text); line-height: 1.2; margin-bottom: .15rem; }
.adm-index-desc  { font-size: .72rem; color: var(--a-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-index-arrow { font-size: .68rem; color: var(--a-border); flex-shrink: 0; transition: color .15s, transform .15s; }
.adm-index-card:hover .adm-index-arrow { color: var(--a-brand-mid); transform: translateX(3px); }

/* ════════════════════════════════════════════════════════
   EMPTY / MISC
════════════════════════════════════════════════════════ */
.adm-empty { text-align: center; padding: 3rem 1rem; color: var(--a-muted); font-size: .85rem; }
.adm-empty i { font-size: 2rem; margin-bottom: .75rem; display: block; opacity: .25; }
.adm-page-wrap { margin-top: 1rem; }

/* ════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES
════════════════════════════════════════════════════════ */
.card        { border: 1px solid var(--a-border) !important; border-radius: var(--a-radius) !important; overflow: hidden !important; box-shadow: var(--a-shadow-sm); }
.card-header { background: var(--a-card) !important; border-bottom: 1px solid var(--a-border) !important; font-weight: 600; font-size: .88rem; }
.card-header:first-child { border-radius: var(--a-radius) var(--a-radius) 0 0; }
.btn         { font-family: var(--a-font); font-weight: 600; border-radius: var(--a-radius-sm) !important; }
.btn-primary       { background: var(--a-brand) !important; border-color: var(--a-brand) !important; }
.btn-primary:hover { background: var(--a-brand-dark) !important; border-color: var(--a-brand-dark) !important; }
.form-control, .form-select { border: 1.5px solid var(--a-border); border-radius: var(--a-radius-sm) !important; font-family: var(--a-font); }
.form-control:focus, .form-select:focus { border-color: var(--a-brand-mid) !important; box-shadow: 0 0 0 3px rgba(231,76,60,.12) !important; }
.table th { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); border-bottom: 1.5px solid var(--a-border) !important; }
.table td  { border-bottom: 1px solid var(--a-border); vertical-align: middle; }
.table-hover tbody tr:hover { background: #fff8f7; }
.pagination .page-link { color: var(--a-brand) !important; border-color: var(--a-border) !important; font-family: var(--a-font-mono); font-size: .8rem; border-radius: var(--a-radius-sm) !important; }
.pagination .page-item.active .page-link { background: var(--a-brand) !important; border-color: var(--a-brand) !important; color: #fff !important; }
.alert-success { background: #e8f5e9 !important; color: #1b5e20 !important; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .adm-form-grid--2     { grid-template-columns: 1fr; }
    .adm-perm-module-body { grid-template-columns: 1fr; }
    .adm-table-wrap       { overflow-x: auto; }
    .adm-hide-sm          { display: none !important; }
    .adm-index-grid       { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   TOOLBAR — patrón fd-toolbar adaptado con prefijo adm-
════════════════════════════════════════════════════════ */
.adm-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1rem; background: var(--a-card);
    border: 1.5px solid var(--a-border); border-radius: var(--a-radius);
    padding: .6rem .85rem; box-shadow: var(--a-shadow-sm);
}
.adm-search-wrap  { position: relative; flex: 1; min-width: 160px; }
.adm-search-input {
    width: 100%; border: 1.5px solid var(--a-border); border-radius: 9px;
    padding: .38rem 2.1rem .38rem 2rem; font-size: .82rem;
    background: var(--a-surface); color: var(--a-text);
    outline: none; transition: border-color .15s; font-family: var(--a-font);
}
.adm-search-input:focus { border-color: var(--a-brand-mid); background: #fff; box-shadow: 0 0 0 3px rgba(231,76,60,.08); }
.adm-search-ico   { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--a-muted); font-size: .72rem; pointer-events: none; }
.adm-search-clear { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); color: var(--a-muted); font-size: .68rem; text-decoration: none; line-height: 1; transition: color .1s; }
.adm-search-clear:hover { color: var(--a-brand); }
.adm-filter-label  { font-size: .72rem; font-weight: 700; color: var(--a-muted); white-space: nowrap; }
.adm-filter-select {
    border: 1.5px solid var(--a-border); border-radius: 9px;
    padding: .32rem .7rem; font-size: .78rem; color: var(--a-text);
    background: var(--a-surface); font-family: var(--a-font);
    outline: none; cursor: pointer; transition: border-color .14s;
}
.adm-filter-select:focus { border-color: var(--a-brand-mid); }
.adm-toolbar-btn {
    padding: .38rem .8rem; font-size: .78rem; font-weight: 700;
    border: none; border-radius: 9px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: opacity .12s, background .12s; text-decoration: none; font-family: var(--a-font);
}
.adm-toolbar-btn--search { background: var(--a-brand); color: #fff; }
.adm-toolbar-btn--search:hover { background: var(--a-brand-dark); color: #fff; }
.adm-toolbar-btn--reset { background: var(--a-surface); color: var(--a-muted); border: 1.5px solid var(--a-border); }
.adm-toolbar-btn--reset:hover { border-color: var(--a-brand-mid); color: var(--a-brand); }
.adm-view-toggle { display: flex; border: 1.5px solid var(--a-border); border-radius: 9px; overflow: hidden; }
.adm-view-btn {
    width: 34px; height: 32px; border: none; background: var(--a-surface);
    color: var(--a-muted); cursor: pointer; font-size: .78rem;
    display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.adm-view-btn:first-child { border-right: 1px solid var(--a-border); }
.adm-view-btn.active { background: var(--a-brand); color: #fff; }
.adm-view-btn:not(.active):hover { background: var(--a-brand-light); color: var(--a-brand); }

/* ════════════════════════════════════════════════════════
   CARDS GRID — patrón fd-grid/fd-card con prefijo adm-
════════════════════════════════════════════════════════ */
.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.adm-card {
    background: var(--a-card); border: 1.5px solid var(--a-border);
    border-radius: var(--a-radius); box-shadow: var(--a-shadow-sm);
    display: flex; flex-direction: column; overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.adm-card:hover { box-shadow: var(--a-shadow-md); transform: translateY(-2px); }
.adm-card-head {
    padding: .85rem .9rem .65rem; background: var(--a-surface);
    border-bottom: 1px solid var(--a-border);
    display: flex; align-items: center; gap: .65rem;
}
.adm-card-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.adm-card-name { font-size: .88rem; font-weight: 700; color: var(--a-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-card-sub  { font-size: .7rem; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; }
.adm-card-actions {
    display: flex; gap: .4rem; padding: .55rem .9rem .7rem;
    border-top: 1px solid var(--a-border); background: var(--a-surface);
    margin-top: auto;
}

/* ════════════════════════════════════════════════════════
    DROPDOWN MENU
════════════════════════════════════════════════════════ */
.drop-wrapper { position: relative; display: inline-flex; }
.drop-btn {
    width: 28px; height: 28px; border: none; background: var(--a-surface);
    border-radius: 6px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--a-muted);
    transition: background .12s, color .12s;
}
.drop-btn:hover { background: var(--a-surface-hover); color: var(--a-brand); }
.drop-menu {
    position: absolute; right: 0; top: 100%;
    background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px; z-index: 9999; display: none;
}
.drop-menu.open { display: block; }
.drop-menu.open.drop-up { top: auto; bottom: 100%; }
.drop-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; font-size: .8rem; color: var(--a-text);
    text-decoration: none; transition: background .1s;
    border: none; background: none; width: 100%; text-align: left;
    cursor: pointer; font-family: inherit;
}
.drop-item:hover { background: var(--a-surface); color: var(--a-brand); }
.drop-item--delete { color: #dc3545; }
.drop-item--delete:hover { background: #fff5f5; color: #dc3545; }
.adm-page-header__dropdown { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 12px; }

/* Table overflow fix for dropdowns */
.adm-table-wrap, .adm-table-wrapper {
    overflow: visible !important;
}

@media (max-width: 500px) {
    .adm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ════════════════════════════════════════════════════════
   REPORT STYLES — Usado en informes y vistas de reporte
════════════════════════════════════════════════════════ */
.report-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    /*padding-top: 5rem;*/
}
.report-header {
    background: linear-gradient(135deg, var(--a-brand) 0%, var(--a-brand-dark) 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.report-header__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.report-header__title {
    font-size: 1.5rem;
    font-weight: 700;
}
.report-header__subtitle {
    font-size: .9rem;
    opacity: .9;
    margin-top: .25rem;
}
.report-patient {
    background: var(--a-card);
    border: 1px solid var(--a-border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.report-patient__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.report-patient__item {
    display: flex;
    flex-direction: column;
}
.report-patient__label {
    font-size: .65rem;
    color: var(--a-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.report-patient__value {
    font-size: .95rem;
    font-weight: 600;
}
.report-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.report-stat {
    background: var(--a-card);
    border: 1px solid var(--a-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.report-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a-brand);
}
.report-stat__label {
    font-size: .7rem;
    color: var(--a-muted);
    margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   SALUD Module Classes (adm-* prefix)
   Added to match /administrar/personas styling
   ═══════════════════════════════════════════════════════════════ */

/* ── Person Row (avatar + name + email) ─────────────────── */
.adm-person-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.adm-person-name {
    font-weight: 600;
    line-height: 1.25;
    color: var(--a-text);
    text-decoration: none;
}

.adm-person-name:hover {
    color: var(--a-brand);
}

.adm-person-email {
    font-size: .74rem;
    color: var(--a-muted);
}

/* ── Button Icon (square icon button) ──────────────────── */
.adm-btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--a-radius-sm);
}

/* ── Button More (3 dots dropdown trigger) ─────────────── */
.adm-btn--more {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--a-radius-sm);
    background: var(--a-card);
    color: var(--a-muted);
    border: 1px solid var(--a-border);
    cursor: pointer;
    transition: all .15s ease;
}

.adm-btn--more:hover {
    background: var(--a-surface);
    color: var(--a-text);
    border-color: var(--a-brand);
}

/* ── Table Hover ───────────────────────────────────────── */
.adm-table-hover tbody tr:hover {
    background: var(--a-surface);
}

/* ── Pagination (custom styled) ────────────────────────── */
.adm-pagination {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: 1.5rem;
}

.adm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border-radius: var(--a-radius-sm);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--a-border);
    background: var(--a-card);
    color: var(--a-text);
    transition: all .15s ease;
}

.adm-page-btn:hover {
    background: var(--a-surface);
    border-color: var(--a-brand);
}