/* ============================================================ VARIABLES Y RESET ============================================================ */ :root { --verde: #2d6a2d; --verde-claro: #4a9e4a; --verde-suave: #e8f5e9; --tierra: #8b5e3c; --tierra-claro: #f5ede6; --amarillo-bg: #fff8e1; --amarillo-txt: #e65100; --rojo: #c0392b; --rojo-suave: #fdecea; --azul: #1565c0; --azul-suave: #e3f2fd; --gris: #f4f4f4; --gris-txt: #666; --blanco: #ffffff; --sombra: 0 2px 12px rgba(0,0,0,0.10); --radio: 16px; --radio-btn: 50px; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { background: #eff4ef; } body { font-family: 'Nunito', sans-serif; background: #1b4d1b; color: #1a1a1a; min-height: 100dvh; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: background 0.3s ease, color 0.3s ease; } .hidden { display: none !important; } /* Tarjetas de CAC solo para el admin dueño: ocultas por defecto para TODO sembrador (incluido Presidente). Solo se muestran si tiene .es-admin-cac. A prueba de balas: ninguna lógica JS que manipule .hidden puede revelarlas. */ .cac-solo-admin { display: none !important; } body.es-admin-cac .cac-solo-admin { display: flex !important; } .print-only, .print-content { display: none; } /* ============================================================ LOGIN & APP SHELL ============================================================ */ #pantalla-login { min-height: 100dvh; background: linear-gradient(160deg, #1b4d1b 0%, #2d6a2d 55%, #4a9e4a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .login-logo { font-size: 70px; margin-bottom: 6px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); } .login-titulo { color: #fff; font-size: 24px; font-weight: 900; text-align: center; letter-spacing: 1px; } .login-sub { color: rgba(255,255,255,.72); font-size: 14px; text-align: center; margin-bottom: 32px; margin-top: 4px; } .login-card { background: #fff; border-radius: 24px; padding: 30px 24px; width: 100%; max-width: 380px; box-shadow: 0 8px 40px rgba(0,0,0,.22); } .login-card label { display: block; font-size: 12px; font-weight: 800; color: var(--gris-txt); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .login-card input { width: 100%; padding: 15px 16px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 17px; font-family: 'Nunito', sans-serif; margin-bottom: 16px; outline: none; transition: border-color .2s; } .login-card input:focus { border-color: var(--verde-claro); } .login-help { color: var(--gris-txt); font-size: 12px; line-height: 1.45; margin-top: 8px; } .login-help strong { color: var(--verde); } .login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: #999; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #ececec; } .link-login-toggle { margin-top: 12px; width: 100%; background: transparent; border: none; color: var(--verde); font-size: 12px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; } .legacy-login-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; } #recaptcha-container { min-height: 1px; } .solicitud-cac-card { border: 2px dashed var(--azul); background: #f7fbff; } .solicitud-cac-card .ai-ico { background: var(--azul-suave); color: var(--azul); } .solicitud-cac-estado { margin-top: 12px; } .modal-card-xl { width: 430px; max-width: calc(100% - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; } .modal-card-titulo { font-size: 18px; font-weight: 900; color: var(--verde); margin-bottom: 4px; } .modal-card-sub { font-size: 12px; color: var(--gris-txt); line-height: 1.45; margin-bottom: 14px; } .modal-obligatorio { background: rgba(0,0,0,.62); } .modal-status-box { border-radius: 12px; padding: 12px 14px; background: #f8faf8; border: 1px solid #e4ebe4; font-size: 13px; color: #425042; line-height: 1.45; margin-top: 10px; } .modal-status-box strong { color: var(--verde); } .btn[disabled], .btn-login[disabled] { opacity: .65; cursor: not-allowed; transform: none !important; } .hidden-soft { visibility: hidden; pointer-events: none; } .btn-social { width: 70px; height: 70px; padding: 0; border: 2px solid #dadce0; background: white; color: #3c4043; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.08); letter-spacing: 0.25px; flex: none; } .btn-social:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); background: #f8f9fa; transform: scale(1.05); border-color: #1976d2; } .btn-social:active { background: #f1f3f4; transform: scale(0.98); } .btn-social:disabled { opacity: 0.5; cursor: not-allowed; } /* Tooltip para botones sociales */ .btn-social::before { content: attr(aria-label); position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 8px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000; } .btn-social:hover::before { opacity: 1; } .btn-login { width: 100%; padding: 17px; background: var(--verde); color: #fff; border: none; border-radius: var(--radio-btn); font-size: 17px; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; transition: background .2s, transform .1s; } .btn-login:active { transform: scale(.98); background: #1b4d1b; } #app { display: none; flex-direction: column; min-height: 100dvh; padding-bottom: 84px; } .app-header { background: var(--verde); color: #fff; padding: 12px 16px 10px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,.18); } .header-logo { font-size: 26px; } .header-info { flex: 1; min-width: 0; } .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .header-titulo { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-usuario { font-size: 11px; opacity: .8; margin-top: 1px; display: flex; align-items: center; gap: 4px; } .badge-rol-nuevo { background: rgba(255,255,255,.25); border-radius: 6px; padding: 1px 7px; font-size: 10px; font-weight: 800; } .btn-salir { background: rgba(255,255,255,.18); border: none; border-radius: 10px; color: #fff; padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; flex-shrink: 0; } .app-content { flex: 1; padding: 14px; max-width: 600px; margin: 0 auto; width: 100%; } /* ============================================================ BOTTOM NAV & SECTIONS ============================================================ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e0e0e0; display: flex; z-index: 200; box-shadow: 0 -2px 12px rgba(0,0,0,.08); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 2px 10px; cursor: pointer; border: none; background: transparent; gap: 2px; transition: background .15s; } .nav-item .nav-icon { font-size: 20px; line-height: 1; } .nav-item .nav-label { font-size: 10px; font-weight: 700; color: #aaa; font-family: 'Nunito', sans-serif; } .nav-item.activo { background: var(--verde-suave); } .nav-item.activo .nav-label { color: var(--verde); } .seccion { display: none; } .seccion.activa { display: block; } /* ============================================================ COMPONENTES GENERALES ============================================================ */ .card { background: #fff; border-radius: var(--radio); padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); } .card-titulo { font-size: 14px; font-weight: 800; color: var(--verde); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .card-titulo .ico { font-size: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 18px; border-radius: var(--radio-btn); border: none; font-size: 15px; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; transition: all .15s; } .btn:active { transform: scale(.97); } .btn-full { width: 100%; } .btn-verde { background: var(--verde); color: #fff; } .btn-rojo { background: var(--rojo); color: #fff; } .btn-azul { background: var(--azul); color: #fff; } .btn-tierra { background: var(--tierra); color: #fff; } .btn-amarillo { background: #f39c12; color: #fff; } .btn-gris { background: #e0e0e0; color: #555; } .btn-outline { background: transparent; border: 2px solid var(--verde); color: var(--verde); } .btn-sm { padding: 9px 14px; font-size: 13px; } .btn-ico { padding: 6px 10px; border-radius: 8px; font-size: 14px; } .campo { margin-bottom: 13px; } .campo label { display: block; font-size: 12px; font-weight: 800; color: var(--gris-txt); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; } .campo input:not([type="checkbox"]):not([type="range"]), .campo select, .campo textarea { width: 100%; padding: 13px 15px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; font-family: 'Nunito', sans-serif; background: #fafafa; outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none; color: #1a1a1a; } .campo input:focus:not([type="range"]), .campo select:focus { border-color: var(--verde-claro); background: #fff; } /* ── Premium Range Slider Styling ── */ .campo input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #e2e8f0; border-radius: 6px; outline: none; margin: 14px 0; padding: 0 !important; border: none !important; transition: background 0.2s; cursor: pointer; } /* Chrome, Safari, Opera, Edge */ .campo input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8px; background: #e2e8f0; border-radius: 6px; border: none; } .campo input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--verde, #2d6a2d); border: 3px solid #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); margin-top: -7px; cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease; } .campo input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--verde-claro, #4a9e4a); } .campo input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); } /* Firefox */ .campo input[type="range"]::-moz-range-track { width: 100%; height: 8px; background: #e2e8f0; border-radius: 6px; border: none; } .campo input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--verde, #2d6a2d); border: 3px solid #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease; } .campo input[type="range"]::-moz-range-thumb:hover { transform: scale(1.2); background: var(--verde-claro, #4a9e4a); } .campo input[type="range"]::-moz-range-thumb:active { transform: scale(0.95); } .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; } .stat-card { background: #fff; border-radius: var(--radio); padding: 14px; text-align: center; box-shadow: var(--sombra); } .stat-ico { font-size: 24px; margin-bottom: 4px; } .stat-num { font-size: 30px; font-weight: 900; color: var(--verde); line-height: 1; } .stat-lbl { font-size: 11px; color: var(--gris-txt); font-weight: 700; margin-top: 3px; } .item { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #f0f0f0; } .item:last-child { border-bottom: none; padding-bottom: 0; } .item-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ico-verde { background: var(--verde-suave); } .ico-tierra { background: var(--tierra-claro); } .ico-azul { background: var(--azul-suave); } .ico-amarillo { background: var(--amarillo-bg); } .ico-rojo { background: var(--rojo-suave); } .ico-gris { background: #f4f4f4; } .item-info { flex: 1; min-width: 0; } .item-nom { font-size: 14px; font-weight: 700; } .item-det { font-size: 12px; color: var(--gris-txt); margin-top: 2px; } .item-val { font-size: 15px; font-weight: 800; color: var(--verde); flex-shrink: 0; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; } .badge-verde { background: var(--verde-suave); color: var(--verde); } .badge-rojo { background: var(--rojo-suave); color: var(--rojo); } .badge-amarillo { background: var(--amarillo-bg); color: var(--amarillo-txt); } .badge-azul { background: var(--azul-suave); color: var(--azul); } .badge-gris { background: #f0f0f0; color: #666; } .aviso { border-radius: 12px; padding: 13px 15px; margin-bottom: 13px; font-size: 14px; font-weight: 600; display: flex; align-items: flex-start; gap: 9px; } .aviso .a-ico { font-size: 20px; flex-shrink: 0; } .aviso-verde { background: var(--verde-suave); color: var(--verde); } .aviso-rojo { background: var(--rojo-suave); color: var(--rojo); } .aviso-amarillo { background: var(--amarillo-bg); color: var(--amarillo-txt); } .aviso-azul { background: var(--azul-suave); color: var(--azul); } .tabs { display: flex; background: #e8e8e8; border-radius: 12px; padding: 3px; margin-bottom: 15px; } .tab { flex: 1; padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 800; border-radius: 10px; cursor: pointer; border: none; background: transparent; font-family: 'Nunito', sans-serif; color: #888; transition: all .15s; } .tab.activo { background: #fff; color: var(--verde); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #f0f0f0; } .chk-grande { width: 26px; height: 26px; border-radius: 7px; border: 2px solid #ccc; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: all .15s; } .chk-grande.marcado { background: var(--verde); border-color: var(--verde); color: #fff; } .chk-grande.disabled { opacity: 0.5; pointer-events: none; } .ubicacion-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ub-btn { padding: 11px 4px; border-radius: 12px; border: 2px solid #ddd; background: #fff; text-align: center; font-size: 11px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; color: #666; transition: all .15s; } .ub-btn.activo { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); } .num-wrap { display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 14px; overflow: hidden; background: #fff; } .num-btn { width: 50px; height: 52px; border: none; background: #f4f4f4; font-size: 22px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; transition: background .15s; flex-shrink: 0; } .num-btn:active { background: #ddd; } .num-inp { flex: 1; text-align: center; font-size: 22px; font-weight: 900; border: none; outline: none; font-family: 'Nunito', sans-serif; color: var(--verde); background: transparent; } .estatus-grande { text-align: center; padding: 22px; border-radius: var(--radio); margin-bottom: 14px; } .estatus-grande .e-ico { font-size: 50px; margin-bottom: 6px; } .estatus-grande .e-txt { font-size: 19px; font-weight: 900; } .estatus-grande .e-sub { font-size: 12px; opacity: .8; margin-top: 4px; } .e-corriente { background: var(--verde-suave); color: var(--verde); } .e-preventivo { background: var(--amarillo-bg); color: var(--amarillo-txt); } .e-critico { background: var(--rojo-suave); color: var(--rojo); } .grid-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .mes-card { padding: 12px 6px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 4px; } .mes-card span { font-size: 10px; font-weight: 600; opacity: .85; } .mes-verde { background: var(--verde-suave); color: var(--verde); } .mes-amarillo { background: var(--amarillo-bg); color: var(--amarillo-txt); } .mes-rojo { background: var(--rojo-suave); color: var(--rojo); } .mes-gris { background: #f0f0f0; color: #999; } .sec-titulo { font-size: 19px; font-weight: 900; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .sep { height: 1px; background: #f0f0f0; margin: 14px 0; } .admin-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border-radius: 14px; margin-bottom: 10px; box-shadow: var(--sombra); cursor: pointer; border: none; width: 100%; font-family: 'Nunito', sans-serif; text-align: left; } .admin-item .ai-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--verde-suave); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .admin-item .ai-info { flex: 1; } .admin-item .ai-nom { font-size: 14px; font-weight: 800; } .admin-item .ai-desc { font-size: 11px; color: var(--gris-txt); margin-top: 2px; } .bienvenida { background: linear-gradient(135deg, var(--verde), var(--verde-claro)); border-radius: var(--radio); padding: 18px; color: #fff; margin-bottom: 14px; } .bienvenida-nom { font-size: 20px; font-weight: 900; } .bienvenida-fecha { font-size: 12px; opacity: .8; margin-top: 2px; } .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; } .menu-item { background: #fff; border-radius: var(--radio); padding: 18px 14px; text-align: center; box-shadow: var(--sombra); cursor: pointer; border: none; font-family: 'Nunito', sans-serif; transition: transform .15s; } .menu-item:active { transform: scale(.97); } .menu-item .mi-ico { font-size: 34px; margin-bottom: 7px; } .menu-item .mi-txt { font-size: 13px; font-weight: 800; color: #222; } .menu-item .mi-sub { font-size: 10px; color: #aaa; margin-top: 2px; } #toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(16px); background: #222; color: #fff; padding: 11px 22px; border-radius: 50px; font-size: 14px; font-weight: 700; opacity: 0; transition: all .3s; z-index: 9999; white-space: nowrap; pointer-events: none; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Indicador offline ── */ #offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; background: #e65100; color: #fff; font-size: 12px; font-weight: 800; text-align: center; padding: 5px 10px; display: none; align-items: center; justify-content: center; gap: 6px; } #offline-banner.visible { display: flex; } body.offline-mode .app-header { background: #555; } .tabla-global-wrap { overflow-x: auto; margin-top: 10px; } .tabla-global { width: 100%; border-collapse: collapse; font-size: 12px; } .tabla-global th { background: var(--verde); color: #fff; padding: 7px 8px; text-align: left; } .tabla-global td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; } .roles-grid { display: grid; gap: 10px; } .lista-editable { border: 1px solid #e0e0e0; border-radius: 8px; max-height: 150px; overflow-y: auto; margin-top: 10px; background: #fff; } .lista-editable-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px; } .lista-editable-item:last-child { border-bottom: none; } .acciones-min { display: flex; gap: 5px; } .grid-cacs-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 180px; overflow-y: auto; background: #fafafa; padding: 12px; border: 2px solid #e0e0e0; border-radius: 12px; } /* ── Selección de destino campo ── */ .campo-destino-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .check-item input[type="checkbox"] { width: 20px !important; height: 20px !important; -webkit-appearance: checkbox !important; appearance: checkbox !important; padding: 0 !important; border: none !important; background: initial !important; accent-color: var(--verde); cursor: pointer; } @media (max-width: 360px) { .menu-item .mi-txt { font-size: 12px; } .stat-num { font-size: 26px; } .tab { font-size: 11px; } } @media (max-width: 520px) { .app-header { flex-wrap: wrap; } .header-actions { width: 100%; justify-content: flex-end; } } /* ============================================================ MODO OSCURO ============================================================ */ .dark-mode, .dark-mode body { background: #121212 !important; color: #e0e0e0 !important; } .dark-mode #app { background: #121212; } .dark-mode .card, .dark-mode .stat-card, .dark-mode .menu-item, .dark-mode .admin-item, .dark-mode .login-card { background: #1e1e1e !important; color: #e0e0e0; border: 1px solid #333; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .dark-mode .app-header { background: #0d2b0d !important; } .dark-mode .bottom-nav { background: #181818 !important; border-color: #2a2a2a !important; } .dark-mode .nav-item .nav-label { color: #bbb; } .dark-mode .nav-item.activo { background: #1a3a1a; } .dark-mode .nav-item.activo .nav-label { color: #58c258; } .dark-mode .campo input:not([type="checkbox"]):not([type="range"]), .dark-mode .campo select, .dark-mode .campo textarea, .dark-mode .login-card input { background: #252525 !important; color: #fff !important; border-color: #444 !important; } /* Dark Mode Track for Range Inputs */ .dark-mode .campo input[type="range"] { background: #444; } .dark-mode .campo input[type="range"]::-webkit-slider-runnable-track { background: #444; } .dark-mode .campo input[type="range"]::-moz-range-track { background: #444; } .dark-mode .campo input[type="range"]::-webkit-slider-thumb { background: #58c258; } .dark-mode .campo input[type="range"]::-moz-range-thumb { background: #58c258; } .dark-mode .tabs { background: #252525 !important; } .dark-mode .tab.activo { background: #1e1e1e !important; color: #58c258 !important; } .dark-mode .item-nom { color: #ffffff; } .dark-mode .item-det { color: #ccc; } .dark-mode .num-wrap { background: #252525 !important; border-color: #444 !important; } .dark-mode .num-btn { background: #333 !important; color: #fff !important; } .dark-mode .num-inp { color: #58c258 !important; } .dark-mode .lista-editable { background: #1e1e1e !important; border-color: #333 !important; } .dark-mode .lista-editable-item { border-color: #2a2a2a !important; color: #e0e0e0; } .dark-mode .bienvenida { background: linear-gradient(135deg, #0f2e0f, #1b4d1b) !important; } .dark-mode .sec-titulo { color: #ffffff; } .dark-mode .card-titulo { color: #58c258; } .dark-mode .stat-num { color: #58c258; } .dark-mode .item-val { color: #58c258; } .dark-mode .ub-btn { background: #252525 !important; color: #bbb !important; border-color: #444 !important; } .dark-mode .ub-btn.activo { background: #1a3a1a !important; color: #58c258 !important; border-color: #58c258 !important; } .dark-mode #pantalla-login { background: linear-gradient(160deg, #0a200a 0%, #1b4d1b 55%, #2d6a2d 100%) !important; } .dark-mode .tabla-global td { border-color: #2a2a2a; color: #e0e0e0; } .dark-mode .mi-txt { color: #ffffff !important; } .dark-mode .toggle-row { border-color: #2a2a2a; } .dark-mode .chk-grande { background: #252525 !important; border-color: #444 !important; color: #fff; } /* ============================================================ ESTÁNDAR DE IMPRESIÓN HOMOLOGADO (AUDITORÍA/CAC) MÓVIL Y FÍSICA ============================================================ */ @media print { /* Forzar tamaño de hoja carta independiente del dispositivo */ @page { margin: 1.5cm; size: letter portrait; } /* 1. OBLIGAR A LAS IMPRESORAS A PINTAR LOS COLORES DE FONDO */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; /* Evitar que el zoom del celular escale el contenido de impresión */ box-sizing: border-box !important; } /* 2. RESET COMPLETO PARA MÓVIL: forzar ancho de hoja carta (816px = letter a 96dpi) El viewport del celular es ~360-430px, lo que deforma tablas y texto. Al fijar 816px y escalar con zoom, la impresión queda idéntica a la de PC. */ html { width: 816px !important; font-size: 10pt !important; zoom: 1 !important; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } body, #app, .app-content { background: #fff !important; font-size: 10pt !important; color: #000 !important; font-family: Arial, Helvetica, sans-serif !important; height: auto !important; min-height: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; padding-bottom: 0 !important; display: block !important; overflow: visible !important; } /* Ocultar elementos de interfaz */ #pantalla-login, .app-header, .bottom-nav, #toast, button, .btn, .tabs, .no-print, .menu-grid, .stats-row, .card-titulo .ico, .admin-item, .aviso, .num-wrap, .ubicacion-btns, input, select, .badge-rol-nuevo, .ai-arrow, .aviso-verde, .aviso-rojo, .aviso-azul, .aviso-amarillo { display: none !important; } .seccion { display: none !important; } .seccion.activa { display: block !important; } /* Cabecera del PDF — banda con acento de marca (verde) */ .print-only { display: block !important; border-bottom: 3px solid #2d6a2d; margin-bottom: 18px; padding-bottom: 10px; page-break-inside: avoid; break-inside: avoid; } .print-content { display: block !important; page-break-inside: auto; } #print-main-title { font-size: 17pt !important; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; color: #2d6a2d !important; line-height: 1.15; } #print-cac { font-size: 11pt !important; margin: 4px 0; font-weight: bold; color: #1a1a1a !important; } #print-date { font-size: 8pt; color: #666; text-align: right; } #print-subtitle { font-size: 10.5pt; font-weight: 600; margin-top: 6px; color: #2d6a2d !important; border: none !important; } #print-user { font-size: 9pt; font-weight: bold; color: #444 !important; margin-bottom: 10px; } /* Tarjetas y secciones */ .card { box-shadow: none !important; border: none !important; margin-bottom: 16px !important; padding: 0 !important; page-break-inside: auto !important; break-inside: auto; } .sec-titulo { display: none !important; } .card-titulo { border-bottom: 2px solid #2d6a2d; color: #2d6a2d !important; font-size: 11.5pt !important; margin-bottom: 8px !important; padding-bottom: 4px; font-weight: 800; display: block !important; } /* Tablas homologadas */ .tabla-global-wrap { overflow: visible !important; width: 100% !important; margin-top: 0 !important; page-break-inside: auto !important; } table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 16px; page-break-inside: auto !important; font-size: 8.5pt !important; table-layout: fixed !important; } tr { page-break-inside: avoid; break-inside: avoid; page-break-after: auto; } th, td { border: 1px solid #cdddcd !important; padding: 6px 8px !important; text-align: left; color: #1a1a1a !important; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; } th { background: #2d6a2d !important; color: #fff !important; font-weight: bold; text-transform: uppercase; font-size: 7.5pt; letter-spacing: 0.3px; border: 1px solid #2d6a2d !important; } /* Filas alternadas (zebra) para escaneo fácil */ tbody tr:nth-child(even) td { background: #f3f7f3 !important; } tbody tr:nth-child(odd) td { background: #ffffff !important; } /* Listas de ítems (inventario, cooperaciones, etc.) */ .item { display: flex !important; flex-direction: row !important; border-bottom: 1px solid #ccc !important; padding: 5px 0 !important; page-break-inside: avoid !important; break-inside: avoid; align-items: center !important; justify-content: space-between !important; gap: 0 !important; } .item-ico { display: none !important; } .item-info { flex: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; min-width: 0 !important; } .item-nom { font-weight: bold !important; width: 50% !important; font-size: 9pt !important; color: #000 !important; margin: 0 !important; } .item-det { width: 30% !important; font-size: 8.5pt !important; color: #000 !important; margin: 0 !important; } .item-val { width: 20% !important; text-align: right !important; font-weight: bold !important; font-size: 10pt !important; color: #000 !important; margin: 0 !important; flex: 0 0 20% !important; } /* Totales */ .tr-subtotal td { background: #fff !important; font-weight: bold !important; border-top: 1px solid #000 !important; font-style: normal; color: #000 !important; } .tr-subtotal-grand td{ background: #e8e8e8 !important; font-weight: 900 !important; font-size: 10pt; border-top: 2px solid #000 !important; color: #000 !important; } .resumen-ind-subtotal{ background: transparent !important; color: #000 !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; padding: 4px 0 !important; display: flex; justify-content: space-between; page-break-inside: avoid; break-inside: avoid; } .resumen-ind-total { border-top: 2px solid #000 !important; border-bottom: none !important; font-weight: 900 !important; margin-top: 5px !important; } /* Lista editable (directorio, integrantes) */ .lista-editable { max-height: none !important; overflow: visible !important; border: none !important; } .lista-editable-item { border-bottom: 1px solid #ddd !important; font-size: 8.5pt !important; color: #000 !important; padding: 4px 0 !important; } .acciones-min { display: none !important; } /* Área de Firmas */ .area-firmas { display: flex !important; justify-content: space-around; margin-top: 40px !important; padding-top: 15px !important; page-break-inside: avoid !important; break-inside: avoid !important; } .bloque-firma { text-align: center; width: 180px; border-top: 1px solid #000; padding-top: 10px; font-size: 8.5pt; font-weight: bold; color: #000 !important; } } /* Modal de cambio de contraseña */ .modal-password { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); z-index: 9999; padding: 16px; } .modal-password.active { display: flex; } .modal-card { background: #fff; padding: 20px; border-radius: 12px; width: 360px; max-width: calc(100% - 40px); box-shadow: 0 6px 20px rgba(0,0,0,.25); } .modal-pass-ayuda { margin-top: 10px; font-size: 12px; color: var(--gris-txt); line-height: 1.4; } .modal-pass-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }