﻿/* Tema CPA · PUCE Sede Ambato. Cargado después de los estilos heredados.
   Referencia cromática: www.pucesa.edu.ec, consultada el 2026-10-16.
   Azul #0a2874 y acento #00aaec; tonos auxiliares para lectura y contraste. */
:root {
    --puce-blue: #0a2874;
    --puce-cyan: #00aaec;
    --cpa-ink: #24334a;
    --cpa-muted: #59697d;
    --cpa-border: #d6e1ee;
    --bs-primary: #0a2874;
    --bs-primary-rgb: 10, 40, 116;
    --bs-secondary: #00aaec;
    --bs-secondary-rgb: 0, 170, 236;
}
html { min-height: 100%; }
body, body.cpa-pacientes {
    display: block !important; margin: 0 !important; padding: 0 !important;
    min-height: 100vh; height: auto !important;
    background: #f3f6fb !important; color: #24334a;
    font-family: 'Segoe UI', Arial, sans-serif !important; font-size: 15px; line-height: 1.55;
}
body *, body *::before, body *::after { box-sizing: border-box; }
body form { width: 100%; min-width: 0; }
body form > div.auto-style1 { height: auto !important; }
.cpa-brand {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 12px max(24px, calc((100% - 1320px) / 2));
    background: #0a2874; color: white; border-bottom: 4px solid #00aaec;
}
.cpa-brand strong { display: block; color: white; font-size: 21px; letter-spacing: .03em; }
.cpa-brand small { display: block; color: #dceeff; font-size: 13px; }
.cpa-brand > span { font-size: 14px; color: white; text-align: right; }
body #navbar, body .navegacion {
    position: relative; top: auto; left: auto; width: 100%; height: auto;
    background: white; color: #0a2874; padding: 10px 20px;
    border-bottom: 1px solid #d6e1ee; margin: 0;
}
body #navbar ul { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; }
body #navbar ul li { float: none; list-style: none; padding: 0; }
body #navbar ul li a, body .menu > li > a {
    display: block; padding: 8px 8px; color: #0a2874; border-radius: 6px;
    text-decoration: none; font-size: 13px; font-weight: 600;
}
body #navbar ul li a:hover, body .menu > li > a:hover { background: #e8f1fb; color: #0a2874; }
body .submenu { background: white; border: 1px solid #d6e1ee; box-shadow: 0 8px 24px #0a287422; }
body .submenu a { color: #0a2874; }
body #footer { position: static; width: 100%; padding: 22px; margin-top: 32px; background: #0a2874; color: white; font-size: 14px; text-align: center; }
body #footer span { padding: 0 12px; }
body .container { display: block; width: calc(100% - 40px); max-width: 1320px; margin: 24px auto; padding: 24px; background: white; border: 1px solid #d6e1ee; border-radius: 12px; box-shadow: 0 4px 20px #0a287409; }
body .nav-bar { background: white !important; border-bottom: 1px solid #d6e1ee; }
body .nav-bar .container { margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; padding: 8px 12px; }
body .navbar .navbar-nav .nav-link { color: #0a2874 !important; font-family: 'Segoe UI', Arial, sans-serif; }
body h1, body h2, body h3, body h4 { font-family: 'Segoe UI', Arial, sans-serif !important; color: #0a2874; line-height: 1.25; margin-top: 24px; }
body h1 { font-size: clamp(25px, 3vw, 36px); }
body h2 { font-size: 25px; text-align: left; }
body h3 { font-size: 21px; }
body b, body strong { color: inherit; }
body a { color: #0a2874; }
body .text-primary { color: #0a2874 !important; }
body .bg-primary { background-color: #0a2874 !important; }
body .border-primary { border-color: #0a2874 !important; }
body .bg-light { background-color: #edf4fb !important; }
body input[type=text], body input[type=password], body input[type=email], body input[type=number], body input[type=date], body input[type=search], body select, body textarea {
    max-width: 100%; border: 1px solid #b8c9dc !important; border-radius: 6px;
    padding: 9px 11px; background-color: white; color: #24334a; font: inherit;
}
body textarea { min-height: 96px; }
body input[readonly], body textarea[readonly] { background: #edf2f7; }
body input:disabled, body select:disabled, body button:disabled { opacity: .65; cursor: not-allowed; }
body input[type=checkbox], body input[type=radio] { accent-color: #0a2874; }
body :focus-visible { outline: 3px solid #00aaec; outline-offset: 3px; }
body input[type=submit], body input[type=button], body button:not(.navbar-toggler):not(.btn-close), body .btn {
    background: #0a2874; color: white; border: 1px solid #0a2874; border-radius: 6px;
    min-height: 42px; padding: 9px 18px; font: 600 14px 'Segoe UI', Arial, sans-serif;
    cursor: pointer; text-decoration: none; box-shadow: none;
}
body input[type=submit]:hover, body input[type=button]:hover, body .btn:hover { background: #073099; color: white; }
body .btn-secondary, body .cpa-secondary { background: white !important; color: #0a2874 !important; border: 1px solid #0a2874 !important; }
body .btn-danger { background: #ae273b; border-color: #ae273b; }
body .btn-success { background: #176b54; border-color: #176b54; }
body .grid, body .table { border-collapse: collapse; width: 100%; background: white; }
body .grid th, body .table th { background: #0a2874; color: white; padding: 12px; text-align: left; }
body .grid td, body .table td { padding: 10px 12px; border-bottom: 1px solid #d6e1ee; }
body .grid tr:nth-child(even), body .table tbody tr:nth-child(even) { background: #f2f6fc; }
body .grid tr:hover, body .table tbody tr:hover { background: #e8f1fb; }
.cpa-login { width: calc(100% - 40px); max-width: 1000px; margin: 64px auto; display: grid; grid-template-columns: 1fr 1fr; background: white; border: 1px solid #d6e1ee; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px #0a287414; }
.cpa-login-intro { padding: 48px; background: #0a2874; color: white; }
.cpa-login-intro h1 { color: white; margin: 24px 0; }
.cpa-login-intro p { color: #dceeff; }
.cpa-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.cpa-login-fields { padding: 40px; }
.cpa-login-fields h2 { margin-top: 0; }
.cpa-field { margin: 20px 0; }
.cpa-field label { display: block; margin-bottom: 7px; font-weight: 600; }
.cpa-login-fields input[type=text], .cpa-login-fields input[type=password], .cpa-login-fields input[type=submit] { width: 100%; }
.cpa-login-fields input[type=submit] { margin-top: 12px; }
.cpa-message { display: block; color: #ae273b; font-weight: 600; }
.cpa-message:empty { display: none; }
@media (max-width: 760px) {
    .cpa-brand { padding: 18px; align-items: flex-start; flex-direction: column; gap: 8px; }
    .cpa-brand > span { text-align: left; }
    body .container { width: calc(100% - 24px); padding: 16px; margin: 12px auto; }
    body #navbar { padding: 6px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body #navbar ul { flex-wrap: nowrap; width: max-content; min-width: 100%; }
    body #navbar ul li { flex: none; }
    body #navbar ul li a { padding: 9px 10px; white-space: nowrap; }
    .cpa-login { grid-template-columns: 1fr; margin: 24px auto; }
    .cpa-login-intro, .cpa-login-fields { padding: 28px; }
    body .table-responsive { overflow-x: auto; }
}
@media print {
    body { background: white !important; color: black; }
    .cpa-brand, body #navbar, body .nav-bar, body #footer { display: none !important; }
    body .container { width: 100%; max-width: none; box-shadow: none; border: 0; margin: 0; padding: 0; }
    body input[type=submit], body input[type=button], body .btn { display: none; }
}
/* Prioridad sobre la personalización previa de pacientes y tablas de reportes. */
body.cpa-pacientes .btn-primary { background: #0a2874; border: 1px solid #0a2874; box-shadow: none; }
body.cpa-pacientes .btn-primary:hover { background: #073099; transform: none; }
body.cpa-pacientes .cpa-page-heading h1 { color: #0a2874; }
body.cpa-pacientes .cpa-eyebrow { color: #0a2874; }
body.cpa-pacientes .contact > .container > .row > .col-10 > div { background: white !important; border-color: #d6e1ee !important; border-radius: 12px; box-shadow: none; }
body .gridview { width: 100%; border-collapse: collapse; }
body .gridview th { background: #0a2874; color: white; padding: 12px; }
body .gridview td { border-color: #d6e1ee; padding: 10px 12px; }
body .filter-panel { background: #edf4fb; border: 1px solid #d6e1ee; padding: 20px; border-radius: 10px; }
.cpa-login-intro .cpa-eyebrow { color: #dceeff; }
body #navbar:has(ul:empty) { display: none; }
body .cpa-dashboard { padding: 36px; }
body .cpa-dashboard h1 { margin: 12px 0; text-align: left; }
.cpa-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
body .cpa-shortcut { display: block; padding: 26px; background: #f7faff; border: 1px solid #d6e1ee; border-top: 4px solid #00aaec; border-radius: 10px; color: #24334a; text-decoration: none; }
body .cpa-shortcut:hover { background: #edf4fb; border-color: #0a2874; }
body .cpa-shortcut h2 { font-size: 21px; margin: 14px 0; }
.cpa-shortcut > span { color: #59697d; font-size: 13px; font-weight: 600; }
body .cpa-shortcut b { color: #0a2874; font-size: 14px; }
@media (max-width: 760px) { body .cpa-dashboard { padding: 20px; } .cpa-shortcuts { grid-template-columns: 1fr; } }

/* Logo institucional compartido por plantillas y formularios independientes. */
.cpa-brand .cpa-logo, .patient-header .cpa-logo { display:block; width:133px; height:55px; max-width:100%; object-fit:contain; flex-shrink:0; }


/* Controles nativos y directorios compartidos. */
.cpa-grid-region { margin:12px 0; max-width:100%; min-width:0; }
.cpa-grid-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; background:#edf5fc; border:1px solid #d6e5f2; border-radius:8px 8px 0 0; font-size:14px; }
.cpa-grid-search input { min-width:120px; max-width:100%; }
.cpa-grid-search button,.cpa-grid-search select { padding:8px 12px; border:1px solid #aebed3; border-radius:5px; }
.cpa-grid-search button { background:#0a2874; color:white; cursor:pointer; }
.cpa-grid-scroll { overflow:auto; max-width:100%; border:1px solid #d6e5f2; }
table.cpa-native-grid { width:100%; border-collapse:collapse; background:white; font-size:14px; }
.cpa-native-grid th,.cpa-native-grid td { padding:10px 12px; border-bottom:1px solid #d6e5f2; text-align:left; }
.cpa-native-grid th { background:#0a2874; color:white; }
.cpa-native-grid th a { color:white !important; }
.cpa-native-grid tr:nth-child(even) { background:#f3f7fb; }
.cpa-native-grid tr.cpa-selected-row { background:#d7ebfb; outline:2px solid #00aaec; outline-offset:-2px; }
.cpa-native-grid a { white-space:nowrap; }
.cpa-grid-search :focus-visible,.cpa-native-grid a:focus-visible { outline:3px solid #00aaec; outline-offset:2px; }
@media print { .cpa-grid-search { display:none!important; } .cpa-grid-scroll { overflow:visible; } }


/* Botones con ancho suficiente para el texto completo y alineación centrada. */
body input[type=submit], body input[type=button] {
    min-width:max-content; height:auto !important; min-height:42px;
    flex-shrink:0; white-space:pre; text-align:center; line-height:1.4;
}
body button:not(.navbar-toggler):not(.btn-close) {
    min-height:42px; height:auto; white-space:normal; text-align:center;
    overflow-wrap:normal; line-height:1.4;
}
