/* =====================================================================
 * Dogma UI - capa de estilos global
 * Se carga despues de todas las hojas del tema y plugins (layout.phtml).
 * Mantiene la paleta del tema y unifica tipografia, tablas, formularios,
 * botones, modales y paginacion en todo el proyecto.
 *
 * Algunas vistas definen estilos propios con !important (alturas de 28px,
 * fuentes de 0.7rem, padding 0.15rem en tablas). Por eso varias reglas usan
 * el prefijo "body" + !important: para ganarles sin editar cada vista.
 * ===================================================================== */

:root {
    /* Tipografia: cambiar solo esta linea para usar otra fuente */
    --ui-font: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Paleta del tema (sin cambios) */
    --ui-primary: #4099ff;
    --ui-primary-dark: #004b9a;
    --ui-primary-soft: rgba(64, 153, 255, 0.10);
    --ui-success: #2ed8b6;
    --ui-danger: #FF5370;
    --ui-warning: #FFB64D;
    --ui-info: #00bcd4;

    /* Neutros */
    --ui-bg: #f6f7fb;
    --ui-surface: #ffffff;
    --ui-text: #222222;
    --ui-text-soft: #3b4650;
    --ui-muted: #6c757d;
    --ui-border: #e2e5e8;
    --ui-border-soft: #eef0f3;
    --ui-input-border: #d5dbe1;

    --ui-radius: 8px;
    --ui-radius-sm: 6px;
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --ui-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
    --ui-focus: 0 0 0 3px rgba(64, 153, 255, 0.18);
}

/* ---------------------------------------------------------------------
 * Tipografia general
 * Los iconos (feather, font-awesome, flaticon, material) tienen su propia
 * fuente en su clase, por eso aqui no se usa el selector universal.
 * ------------------------------------------------------------------- */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .table, .dropdown-menu, .modal, .tooltip, .popover,
.pcoded-navbar, .pcoded-header, .card, .badge, .breadcrumb,
.jPaginate, .datepicker, .daterangepicker, .ui-widget,
.note-editor, .file-input, #toast-container, .gritter-item,
.select2-container, .bootstrap-select {
    font-family: var(--ui-font) !important;
}

body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ui-text);
    background-color: var(--ui-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--ui-text);
    letter-spacing: -0.01em;
}

a { transition: color .15s ease; }

small, .small { font-size: 0.8em; }
.text-muted { color: var(--ui-muted) !important; }

/* ---------------------------------------------------------------------
 * Encabezado de pagina (titulo + breadcrumb usados en las vistas)
 * ------------------------------------------------------------------- */
.page-header {
    padding: 14px 20px !important;
    margin-bottom: 16px !important;
}
.page-header > .row { align-items: center; margin: 0; }
.page-header h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--ui-text);
}
.page-header .breadcrumb,
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75rem;
}
.breadcrumb-item a { color: var(--ui-muted); }
.breadcrumb-item a:hover { color: var(--ui-primary); }
.breadcrumb-item + .breadcrumb-item::before { color: #b3bcc6; }

/* ---------------------------------------------------------------------
 * Tarjetas
 * ------------------------------------------------------------------- */
.card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
    margin-bottom: 20px;
}
.card .card-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border-soft);
    padding: 14px 20px;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
}
.card .card-header h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-primary-dark);
}
.card .card-body { padding: 20px; }
.card .card-footer {
    background: #fafbfc;
    border-top: 1px solid var(--ui-border-soft);
}
/* Acordeones (gacetas / cronologias) */
.accordion .card { margin-bottom: 10px; }
.accordion .card-header h5 a {
    display: block;
    color: var(--ui-text-soft);
    font-weight: 600;
    text-decoration: none;
}
.accordion .card-header h5 a:hover { color: var(--ui-primary); }

/* ---------------------------------------------------------------------
 * Tablas
 * ------------------------------------------------------------------- */
body .table {
    font-size: 0.8125rem !important;
    color: var(--ui-text);
    margin-bottom: 0;
    background: var(--ui-surface);
}
body .table thead th,
body .table > tr:first-child > th {
    background: #f6f7fb;
    color: #5b6b79;
    font-size: 0.6875rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: 0.7rem 0.75rem !important;
    vertical-align: middle !important;
}
body .table td,
body .table tbody th {
    padding: 0.6rem 0.75rem !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--ui-border-soft);
}
body .table tbody tr:first-child td { border-top: 0; }
/* El tema impide el salto de linea en tablas responsivas y las desborda */
body .table-responsive > .table td { white-space: normal; }
body .table td .btn, body .table td .badge { white-space: nowrap; }

/* Bordeadas: solo lineas horizontales, aspecto mas limpio */
body .table-bordered,
body .table-bordered td,
body .table-bordered th {
    border-left: 0 !important;
    border-right: 0 !important;
    border-color: var(--ui-border-soft);
}
body .table-bordered { border-top: 0; border-bottom: 0; }

.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: rgba(64, 153, 255, 0.05) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfc; }

/* Contenedor con borde redondeado */
.table-responsive {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow-x: auto;
}
.table-responsive > .table { border: 0 !important; }
/* Tablas dentro de tarjetas: la tarjeta ya da el borde */
.card .table-responsive { border-radius: var(--ui-radius-sm); }

/* ---------------------------------------------------------------------
 * Formularios
 * ------------------------------------------------------------------- */
label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ui-text-soft);
    margin-bottom: 0.3rem;
}
.form-group { margin-bottom: 0.85rem !important; }

body .form-control {
    font-size: 0.8125rem !important;
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-input-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.375rem 0.75rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body input.form-control,
body select.form-control:not([multiple]):not([size]) {
    height: 2.25rem !important;
}
body textarea.form-control { height: auto; min-height: 2.25rem; }
body .form-control-sm { height: 1.875rem !important; font-size: 0.75rem !important; }

body .form-control:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus);
    outline: 0;
}
body .form-control::placeholder { color: #a0a9b3; }
body .form-control:disabled,
body .form-control[readonly] { background-color: #f6f7fb; }

.form-control.is-invalid { border-color: var(--ui-danger) !important; }
.invalid-feedback, span.error { font-size: 0.75rem; }

.custom-control-label {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--ui-text);
}
.input-group-text {
    font-size: 0.8125rem;
    background: #f6f7fb;
    border-color: var(--ui-input-border);
}

/* ---------------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------------- */
body .btn {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.5rem 0.95rem;
    border-radius: var(--ui-radius-sm);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
body .btn:focus { box-shadow: var(--ui-focus); }
body .btn:active { transform: translateY(1px); }
body .btn-sm { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
body .btn-lg { font-size: 0.9375rem; padding: 0.65rem 1.25rem; }
body .btn-default,
body .btn-white {
    background: var(--ui-surface);
    border: 1px solid var(--ui-input-border) !important;
    color: var(--ui-text-soft);
}
body .btn-default:hover,
body .btn-white:hover { background: #f6f7fb; }

/* Botones de filtro alineados con los campos (vistas que usan <br> como espaciador) */
.bbotones .btn, .capabotones .btn { margin-bottom: 4px; }

/* ---------------------------------------------------------------------
 * Menus desplegables (boton "Acciones" de las grillas)
 * ------------------------------------------------------------------- */
.dropdown-menu {
    font-size: 0.8125rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    padding: 6px;
}
.dropdown-menu .dropdown-item {
    border-radius: var(--ui-radius-sm);
    padding: 0.45rem 0.75rem;
    color: var(--ui-text-soft);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--ui-primary-soft);
    color: var(--ui-primary-dark);
}
.dropdown-menu .dropdown-item i { width: 16px; text-align: center; }
.dropdown-menu .dropdown-divider { margin: 4px 0; border-color: var(--ui-border-soft); }
/* Separadores tras la ultima opcion (las grillas los agregan siempre) */
.dropdown-menu .dropdown-divider:last-child { display: none; }

/* ---------------------------------------------------------------------
 * Modales
 * ------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--ui-shadow-lg);
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-border-soft);
}
.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}
.modal-body { padding: 20px; }
.modal-footer {
    padding: 12px 20px;
    background: #fafbfc;
    border-top: 1px solid var(--ui-border-soft);
    border-radius: 0 0 12px 12px;
}
.modal-backdrop.show { opacity: 0.45; }

/* ---------------------------------------------------------------------
 * Badges y alertas
 * ------------------------------------------------------------------- */
.badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.alert {
    border-radius: var(--ui-radius);
    font-size: 0.8125rem;
    border-width: 1px;
}

/* ---------------------------------------------------------------------
 * Paginacion (plugin jquery.paginate: aplica colores en linea)
 * ------------------------------------------------------------------- */
.paginacion { padding: 14px 0 4px; }
.jPaginate { font-size: 0.8125rem !important; padding-left: 0 !important; }
.jPaginate a,
.jPaginate span,
.jPaginate .jPag-current,
.jPaginate .jPag-first,
.jPaginate .jPag-last,
.jPaginate .jPag-sprevious,
.jPaginate .jPag-snext {
    min-width: 32px;
    width: auto !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 8px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface) !important;
    color: var(--ui-text-soft) !important;
    font-weight: 500;
    margin-right: 4px;
    text-align: center;
}
.jPaginate a:hover {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
}
.jPaginate .jPag-current {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
}
.jPaginate ul > li { margin: 0; }

/* ---------------------------------------------------------------------
 * Menu lateral y cabecera
 * ------------------------------------------------------------------- */
.pcoded-navbar .pcoded-inner-navbar li > a,
.pcoded-navbar .pcoded-inner-navbar li .pcoded-mtext {
    font-size: 0.8125rem;
    font-weight: 500;
}
.pcoded-navbar .pcoded-inner-navbar .pcoded-menu-caption label {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8996a4;
}
.pcoded-navbar .pcoded-submenu li > a { font-size: 0.8125rem; }

/* ---------------------------------------------------------------------
 * Notificaciones (toastr)
 * ------------------------------------------------------------------- */
#toast-container > div {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    font-size: 0.8125rem;
    opacity: 1;
}

/* ---------------------------------------------------------------------
 * Barras de desplazamiento discretas (Chrome/Edge)
 * ------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #cfd6dd;
    border-radius: 10px;
    border: 2px solid var(--ui-bg);
}
::-webkit-scrollbar-thumb:hover { background: #b3bcc6; }

/* =====================================================================
 * Marco de la aplicacion - Opcion A (menu claro)
 * Cabecera y menu blancos; el azul del tema solo para lo activo.
 * ===================================================================== */

/* Cabecera, titulo de pagina, acciones y estados */
.pcoded-header, .pcoded-header.header-blue {
    background: #fff !important; color: var(--ui-text-soft) !important;
    border-bottom: 1px solid var(--ui-border); box-shadow: none !important;
}
.pcoded-header a, .pcoded-header .navbar-nav > li > a, .pcoded-header .mobile-menu span,
.pcoded-header .dropdown-toggle { color: var(--ui-text-soft) !important; }
.pcoded-header .mobile-menu span, .pcoded-header .mobile-menu span:after, .pcoded-header .mobile-menu span:before { background: var(--ui-text-soft) !important; }
.pcoded-header .m-header { background: #fff !important; border-right: 1px solid var(--ui-border); }
.pcoded-header .b-brand img.logo { height: 40px; width: auto !important; }
.pcoded-content { padding: 24px 28px !important; }

/* Titulo de pagina integrado (sin tarjeta) */
.page-header { background: transparent !important; box-shadow: none !important; padding: 0 0 18px !important; margin-bottom: 0 !important; border-radius: 0 !important; }
.page-header h4 { font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.page-header .breadcrumb { order: -1; }

/* Boton "Acciones" de las grillas: neutro, no compite con los datos */
body .table .btn-warning.dropdown-toggle {
    background: #fff !important; border: 1px solid var(--ui-input-border) !important;
    color: var(--ui-text-soft) !important; font-size: .75rem !important; padding: .3rem .65rem !important;
}
body .table .btn-warning.dropdown-toggle:hover { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }

/* Badges suaves */
.badge-success { background: rgba(46,216,182,.16) !important; color: #0c8a71 !important; }
.badge-danger  { background: rgba(255,83,112,.13) !important; color: #d42f4c !important; }
.badge-info    { background: rgba(0,188,212,.13) !important; color: #00818f !important; }
.badge-warning { background: rgba(255,182,77,.20) !important; color: #9a6200 !important; }
.badge-primary { background: var(--ui-primary-soft) !important; color: var(--ui-primary-dark) !important; }
.badge-secondary { background: #eef0f3 !important; color: #5b6b79 !important; }

/* Tarjetas mas planas */
.card { box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }

/* Menu lateral: estructura */
.pcoded-navbar { box-shadow: none !important; }
.pcoded-navbar .pcoded-inner-navbar { padding: 8px 12px; }
.pcoded-navbar .pcoded-inner-navbar li > a { padding: 9px 12px !important; margin: 2px 0 !important; border-radius: 8px !important; transition: background .12s ease, color .12s ease; }
.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon { width: 22px !important; height: 22px !important; margin-right: 10px !important; font-size: 15px !important; }
.pcoded-navbar .pcoded-inner-navbar .pcoded-menu-caption { padding: 14px 12px 6px !important; }
/* Submenu: espacio para la flecha */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a { padding-right: 32px !important; }
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after { right: 12px !important; }
.pcoded-header .b-brand img.logo { height: 38px !important; }

/* Menu lateral claro */
.pcoded-navbar, .pcoded-navbar.menu-light { background: #fff !important; border-right: 1px solid var(--ui-border); }
.pcoded-navbar .pcoded-inner-navbar li > a { color: var(--ui-text-soft) !important; }
.pcoded-navbar .pcoded-inner-navbar li > a:hover { background: #f3f6fa !important; color: var(--ui-text) !important; }
.pcoded-navbar .pcoded-inner-navbar li.active > a { background: var(--ui-primary-soft) !important; color: var(--ui-primary-dark) !important; font-weight: 600 !important; }
.pcoded-navbar .pcoded-inner-navbar li.active > a .pcoded-micon { color: var(--ui-primary) !important; }

/* Submenu: la opcion activa se marca con color, sin fondo */
.pcoded-navbar .pcoded-submenu li.active > a,
.pcoded-navbar .pcoded-submenu li > a:hover {
    background: transparent !important;
    color: var(--ui-primary-dark) !important;
}
.pcoded-navbar .pcoded-submenu li.active > a { font-weight: 600 !important; }

/* Submenu: sangria alineada con el texto del menu y guia vertical propia */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu {
    margin: 2px 0 6px 22px !important;
    padding: 0 !important;
    border-left: 1px solid var(--ui-border);
    background: transparent !important;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu:after,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:after {
    display: none !important;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    padding: 7px 12px 7px 20px !important;
    margin: 1px 0 !important;
    color: var(--ui-muted) !important;
    border-radius: 0 8px 8px 0 !important;
}
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a {
    color: var(--ui-primary-dark) !important;
    box-shadow: inset 2px 0 0 var(--ui-primary);
}