/* Shared presentation; individual catalog and profile styles keep precedence. */
:root { --fey-accent: #16866e; --fey-border: #e3e8ee; --fey-text: #343d4b; }
body { color: var(--fey-text); }
#content > .container-fluid { padding-bottom: 2rem; }
#content > .container-fluid > h1 { font-weight: 800; margin-bottom: 1rem; }
.card { border-color: var(--fey-border); border-radius: 12px; }
.card-header { background: #f8fafc; border-bottom-color: var(--fey-border); }
.card.shadow { box-shadow: 0 4px 20px rgba(31,41,55,.06) !important; }
.btn { border-radius: 8px; }
.form-control { border-color: #d8dfe7; border-radius: 8px; color: #343d4b; }
.form-control:focus { border-color: var(--fey-accent); box-shadow: 0 0 0 .2rem rgba(22,134,110,.15); }
label { font-weight: 600; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-text { line-height: 1.6; }
.table { color: var(--fey-text); }
.table thead th { background: #f8fafc; color: #667085; border-top: 0; border-bottom-width: 1px; font-size: .8rem; vertical-align: middle; }
.table td { vertical-align: middle; }
.table td, .table th { border-color: #e9edf2; padding: .85rem; }
.table-responsive { border-radius: 8px; }
.table-responsive:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--fey-accent); outline-offset: 3px; }
.ux-editor { max-width: 1000px; }
.ux-editor h1 { color: #202735; font-weight: 800; }
.ux-editor > form { background: #fff; border: 1px solid var(--fey-border); border-radius: 14px; padding: 1.5rem; }
.ux-editor .form-group { margin-bottom: 1.3rem; }
.ux-back { display: inline-block; margin-bottom: 1.25rem; color: #667085; font-size: .875rem; }
.ux-required { color: #a43238; margin-left: .25rem; }
.ux-empty { text-align: center; color: #667085; padding: 2rem !important; }
.ux-section-name { color: #526174; font-size: .9rem; font-weight: 700; }
.sidebar .nav-item.active > .nav-link { background: rgba(255,255,255,.15); border-left: 3px solid #fff; }
.skip-link { position: fixed; top: -80px; left: 1rem; z-index: 3000; background: #fff; color: #155b4d; padding: .75rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.dataTables_wrapper .dataTables_info { font-size: .85rem; color: #667085; }
.dataTables_wrapper .pagination { flex-wrap: wrap; gap: .15rem; }
.modal-content { border-radius: 14px; }
.auth-page .card { max-width: 580px; margin-left: auto; margin-right: auto; }

/* Botón redondo de acción (editar, eliminar) */
.icon-btn { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
/* Título de sección con barra lateral (detalle de título y de rendición) */
.seccion-heading { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #20c9a6; border-left: 4px solid #20c9a6; padding-left: .6rem; margin: 2rem 0 1rem; }

/* Componentes de página: se activan con .ux-page en el contenedor. Cada vista
   solo define lo propio (ancho máximo y contenido específico). */
.ux-page h1 { color: #202735; font-weight: 800; }
.ux-page [id] { scroll-margin-top: 1rem; }
.ux-page .muted { color: #667085; }
.back-link { display: inline-block; margin-bottom: 1.25rem; color: #667085; font-size: .875rem; }

.ux-page .page-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.ux-page .page-heading h1 { margin: 0 0 .25rem; }
.ux-page .heading-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: #e8f6f2; color: #16866e; font-size: 1.3rem; }
.ux-page .page-description { margin: 0; color: #667085; }
.ux-page .heading-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

.ux-page .directory, .ux-page .detail-panel, .ux-page .editor-panel { background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(31,41,55,.04); }
.ux-page .detail-panel, .ux-page .editor-panel { border-radius: 14px; margin-bottom: 1.5rem; }
.ux-page .editor-panel { overflow: visible; padding: 1.5rem; }
.ux-page .directory-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid #edf0f3; }
.ux-page .directory-title { font-size: 1rem; font-weight: 800; color: #202735; margin: 0 0 .25rem; }
.ux-page .result-count { font-size: .85rem; color: #667085; margin: 0; }
.ux-page .panel-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #edf0f3; }
.ux-page .panel-heading p { margin: 0; font-size: .875rem; color: #667085; }
.ux-page .panel-body { padding: 1.5rem; }
.ux-page .detail-panel h2, .ux-page .editor-panel h2 { font-size: 1.05rem; font-weight: 800; color: #202735; margin: 0 0 .25rem; }

/* Lista de filas con enlace (distribuidores, tiendas) */
.ux-page .directory-list { list-style: none; margin: 0; padding: 0; }
.ux-page .directory-item + .directory-item { border-top: 1px solid #edf0f3; }
.ux-page .directory-link { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; color: #000; text-decoration: none; transition: background-color .15s; }
.ux-page .directory-link:visited { color: #000; }
.ux-page .directory-link:hover { background: #f6faf9; color: #000; text-decoration: none; }
.ux-page .directory-link:focus-visible { outline: 2px solid #16866e; outline-offset: -3px; background: #f6faf9; }
.ux-page .directory-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; overflow: hidden; border: 1px solid #e7ebf0; border-radius: 12px; background: #f8fafc; color: #778398; }
.ux-page .directory-icon img { width: 100%; height: 100%; object-fit: cover; }
.ux-page .directory-name { flex: 1; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.ux-page .detail-action { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: #667085; flex-shrink: 0; }

.ux-page .search-box { position: relative; width: var(--search-width, 340px); max-width: 100%; margin: 0; }
.ux-page .search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8590a2; pointer-events: none; }
.ux-page .search-box input { padding-left: 2.6rem; border-radius: 10px; background: #f8fafc; border-color: #e3e7ee; height: 44px; }
.ux-page .search-box-pill input { border-radius: 22px; }

.ux-page .empty-state { text-align: center; padding: 3.5rem 1.5rem; color: #667085; }
.ux-page .empty-state > i { display: block; font-size: 2rem; color: #a5b4c4; margin-bottom: 1rem; }
.ux-page .empty-state h3 { color: #343d4b; font-size: 1.1rem; font-weight: 700; }
.ux-page .empty-state p { margin: 0; }
.ux-page .detail-panel .empty-state { padding: 2.5rem 1.5rem; }
.ux-page .detail-panel .empty-state > i { font-size: 1.7rem; margin-bottom: .75rem; }

.ux-page .metrics { display: grid; grid-template-columns: repeat(var(--metrics-cols, 4), minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ux-page .metric { position: relative; padding: 1.25rem; background: #fff; border: 1px solid #e6e9ee; border-radius: 14px; box-shadow: 0 4px 20px rgba(31,41,55,.04); }
.ux-page .metric > i { float: right; padding: .55rem; border-radius: 10px; color: #16866e; background: #e8f6f2; }
.ux-page .metric-danger > i { color: #b42318; background: #fdecea; }
.ux-page .metric-label { font-size: .85rem; color: #667085; margin-bottom: .6rem; }
.ux-page .metric-value { font-weight: 800; font-size: 1.75rem; color: #202735; line-height: 1.2; overflow-wrap: anywhere; }

/* Tabla dentro de un panel: sin margen y con el mismo espaciado lateral que el panel */
.ux-page .table-flush { margin: 0; font-size: .9rem; }
.ux-page .table-flush td, .ux-page .table-flush th { padding: 1rem 1.5rem; }
.ux-page .table-flush td:first-child { font-weight: 600; color: #202735; }
.ux-page .table-flush tfoot td { font-weight: 800; color: #202735; background: #f8fafc; }
.ux-page .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Listado con filtros (contratos, rendiciones): barra de búsqueda + tabla con DataTables */
.ux-page .filter-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid #edf0f3; background: #fff; }
.ux-page .filter-toolbar .search-field { flex: 1; min-width: 200px; }
.ux-page .filter-toolbar .filter-field { min-width: 185px; }
.ux-page .filter-toolbar label { font-size: .8rem; font-weight: 700; margin-bottom: .4rem; }
.ux-page .table-list { font-size: .875rem; }
.ux-page .table-list td, .ux-page .table-list th { padding: 1rem; vertical-align: middle; }
.ux-page .table-list .badge { padding: .4rem .6rem; border-radius: 20px; font-weight: 700; }
.ux-page .row-title { color: #000; font-weight: 800; }
.ux-page .row-actions { display: flex; gap: .5rem; align-items: center; }

.ux-page .badge-success { background: #e8f6f2; color: #155b4d; }
.ux-page .badge-primary { background: #e8f6f2; color: #16866e; }
.ux-page .badge-danger { background: #fef0ef; color: #b42318; }
.ux-page .badge-warning { background: #fff4db; color: #8a5a00; }

@media (max-width: 767.98px) {
    .ux-page .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ux-page .panel-heading, .ux-page .panel-body, .ux-page .editor-panel { padding: 1rem; }
}
@media (max-width: 575.98px) {
    .ux-page .heading-actions { margin-left: 0; width: 100%; }
    .ux-page .filter-toolbar .filter-field { width: 100%; }
    .ux-page .directory > .card-body { padding: .75rem; }
    .ux-page .directory-toolbar { align-items: stretch; flex-direction: column; padding: 1.1rem; }
    .ux-page .search-box { width: 100%; }
    .ux-page .directory-link { padding: 1rem; gap: .75rem; }
    .ux-page .detail-action span { display: none; }
    .ux-page .table-flush td, .ux-page .table-flush th { padding: .85rem 1rem; }
}
@media (max-width: 375px) {
    .ux-page .metrics { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    #content > .container-fluid { padding-left: 1rem; padding-right: 1rem; }
    .ux-editor > form { padding: 1rem; }
    .form-control { font-size: 16px; }
    .table { font-size: .85rem; }
    .table td, .table th { padding: .65rem; }
    .btn-sm { min-height: 34px; }
    .form-inline { gap: .5rem; }
    .auth-page .p-5 { padding: 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}