/* Estilos compartidos del portal (login, principal, inicio y mantenimientos). Paleta: rojo vino, verde oscuro, gris oscuro y blanco humo. Modo claro por defecto; el modo oscuro se activa con data-theme="oscuro" en (ver js/clinica_tema.js). Complementa a bootstrap/bootstrap.min.css (v3.3.7). */ /* Bootstrap apunta a ../fonts/, que aqui no existe: se redirige a bootstrap/ */ @font-face{ font-family:'Glyphicons Halflings'; src:url('../bootstrap/glyphicons-halflings-regular.eot'); src:url('../bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../bootstrap/glyphicons-halflings-regular.woff2') format('woff2'), url('../bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('../bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('../bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } /* Paleta: rojo vino #722f37, verde oscuro #1e5631, gris oscuro #333a3f, blanco humo #f5f5f5. Los nombres --c-celeste-* / --c-verde-* se conservan por compatibilidad: "celeste" es ahora el acento rojo vino y "verde" el verde oscuro. */ :root{ --c-bg-a:#f5f5f5; --c-bg-b:#ececec; --c-panel:#ffffff; --c-panel-2:#fafafa; --c-text:#333a3f; --c-muted:#6b7378; --c-border:#dcdcdc; --c-shadow:rgba(51,58,63,.14); --c-verde:#4f8f63; --c-verde-suave:#e6efe8; --c-verde-osc:#1e5631; --c-verde-hover:#163f24; --c-celeste:#8e3a45; --c-celeste-suave:#f3e7e9; --c-celeste-osc:#722f37; --c-head-a:#722f37; --c-head-b:#333a3f; --c-head-text:#f5f5f5; --c-input-bg:#ffffff; --c-menu-bg:#ffffff; --c-menu-hover:#f3e7e9; --c-focus:rgba(114,47,55,.25); --c-warn:#b9770e; --c-warn-bg:#fdf3e1; --c-danger:#c0392b; --c-danger-bg:#fdeaea; --c-off-bg:#eeeeee; --c-off-text:#6b7378; --c-off-border:#d0d0d0; } :root[data-theme="oscuro"]{ --c-bg-a:#1c1f22; --c-bg-b:#24282b; --c-panel:#2b3034; --c-panel-2:#31373b; --c-text:#f5f5f5; --c-muted:#a5acb0; --c-border:#41484d; --c-shadow:rgba(0,0,0,.45); --c-verde:#6fbf8a; --c-verde-suave:#1f3526; --c-verde-osc:#2a7445; --c-verde-hover:#338a53; --c-celeste:#b35a66; --c-celeste-suave:#3d2327; --c-celeste-osc:#d9939c; --c-head-a:#5a232a; --c-head-b:#2b3034; --c-input-bg:#232729; --c-menu-bg:#2b3034; --c-menu-hover:#3d2327; --c-focus:rgba(217,147,156,.3); --c-warn:#f0b75a; --c-warn-bg:#3a2f18; --c-danger:#ef8a80; --c-danger-bg:#3b1f1f; --c-off-bg:#353a3e; --c-off-text:#a5acb0; --c-off-border:#4a5156; } /* ---------- Base ---------- */ html{ color-scheme:light; } :root[data-theme="oscuro"]{ color-scheme:dark; } body{ background:linear-gradient(135deg,var(--c-bg-a),var(--c-bg-b)) fixed; color:var(--c-text); min-height:100vh; min-height:100dvh; } a{ color:var(--c-celeste-osc); } .text-muted{ color:var(--c-muted); } /* ---------- Cabecera de pagina ---------- */ .barra{ background:linear-gradient(90deg,var(--c-head-a),var(--c-head-b)); color:var(--c-head-text); padding:18px 0; box-shadow:0 2px 8px var(--c-shadow); margin-bottom:28px; } .barra h1{ margin:0; font-size:26px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.2); } .barra small{ color:#f5f5f5; } /* ---------- Tarjeta ---------- */ .tarjeta{ background:var(--c-panel); border-radius:10px; box-shadow:0 3px 14px var(--c-shadow); padding:20px; border-top:4px solid var(--c-verde); } /* ---------- Botones ---------- */ .btn-clinica{ background:var(--c-verde-osc); border-color:var(--c-verde-osc); color:#fff; font-weight:600; } .btn-clinica:hover,.btn-clinica:focus{ background:var(--c-verde-hover); border-color:var(--c-verde-hover); color:#fff; } .btn-celeste{ background:var(--c-celeste); border-color:var(--c-celeste-osc); color:#fff; } .btn-celeste:hover,.btn-celeste:focus{ background:var(--c-celeste-osc); color:#fff; } .btn-suave{ background:transparent; border:1px solid var(--c-warn); color:var(--c-warn); } .btn-suave:hover{ background:var(--c-warn-bg); color:var(--c-warn); } .btn-verde-suave{ background:transparent; border:1px solid var(--c-verde-osc); color:var(--c-verde-osc); } .btn-verde-suave:hover{ background:var(--c-verde-suave); color:var(--c-verde-osc); } .btn-borrar{ background:transparent; border:1px solid var(--c-danger); color:var(--c-danger); } .btn-borrar:hover{ background:var(--c-danger-bg); color:var(--c-danger); } .btn-default{ background:var(--c-panel-2); border-color:var(--c-border); color:var(--c-text); } .btn-default:hover,.btn-default:focus{ background:var(--c-menu-hover); border-color:var(--c-border); color:var(--c-text); } /* ---------- Tablas ---------- */ .table > thead > tr > th{ background:var(--c-celeste-suave); color:var(--c-celeste-osc); border-bottom:2px solid var(--c-celeste); } .table > tbody > tr > td{ vertical-align:middle; border-top-color:var(--c-border); } .table-hover > tbody > tr:hover{ background:var(--c-verde-suave); } tr.inactiva td.nombre{ color:var(--c-muted); text-decoration:line-through; } .etiqueta{ padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; } .etiqueta-on{ background:var(--c-verde-suave); color:var(--c-verde-osc); border:1px solid var(--c-verde); } :root[data-theme="oscuro"] .etiqueta-on{ color:var(--c-verde); } .etiqueta-off{ background:var(--c-off-bg); color:var(--c-off-text); border:1px solid var(--c-off-border); } /* Estados de la cita: Reservado #42B1E1, Confirmado #66CC00, Cancelado #FF6600 (mismos colores en calendario y dashboard) */ :root{ --st-res:#42B1E1; --st-conf:#66CC00; --st-can:#FF6600; --st-otro:#9aa9af; } .etiqueta-res{ background:#e6f5fc; color:#16789f; border:1px solid var(--st-res); } .etiqueta-conf{ background:#eefadb; color:#3f7a00; border:1px solid var(--st-conf); } .etiqueta-can{ background:#fff0e5; color:#c04b00; border:1px solid var(--st-can); } :root[data-theme="oscuro"] .etiqueta-res{ background:#12384a; color:#7fd0f2; } :root[data-theme="oscuro"] .etiqueta-conf{ background:#21360f; color:#a4e34d; } :root[data-theme="oscuro"] .etiqueta-can{ background:#40220f; color:#ff9a5c; } .acciones form{ display:inline; } /* ---------- Secciones de formulario y dias ---------- */ .seccion-form{ font-size:16px; font-weight:600; color:var(--c-celeste-osc); margin:4px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--c-border); } .seccion-form .glyphicon{ margin-right:6px; color:var(--c-verde-osc); } :root[data-theme="oscuro"] .seccion-form .glyphicon{ color:var(--c-verde); } .dias-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px 12px; margin-bottom:8px; } .dias-grid label{ margin:0; font-weight:400; padding:6px 8px; border:1px solid var(--c-border); border-radius:6px; cursor:pointer; background:var(--c-panel-2); display:flex; align-items:center; gap:8px; } .dias-grid label:hover{ background:var(--c-menu-hover); } .dias-grid input{ margin:0; accent-color:var(--c-verde-osc); } .chip-dia{ display:inline-block; font-size:11px; font-weight:600; padding:2px 7px; margin:1px 2px 1px 0; border-radius:10px; background:var(--c-celeste-suave); color:var(--c-celeste-osc); border:1px solid var(--c-celeste); } .chip-sin{ background:var(--c-warn-bg); color:var(--c-warn); border-color:var(--c-warn); } @media (max-width:600px){ .dias-grid{ grid-template-columns:repeat(2,1fr); } } /* ---------- Reportes ---------- */ .rep-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .rep-total{ font-weight:600; color:var(--c-celeste-osc); } .rep-botones{ display:flex; gap:8px; } .btn-excel{ background:#1e7145; border-color:#1e7145; color:#fff; font-weight:600; } .btn-excel:hover, .btn-excel:focus{ background:#175c38; border-color:#175c38; color:#fff; } .btn-pdf{ background:#c0392b; border-color:#c0392b; color:#fff; font-weight:600; } .btn-pdf:hover, .btn-pdf:focus{ background:#a02a1f; border-color:#a02a1f; color:#fff; } .rep-tabla{ font-size:13px; } .rep-tabla td.text-center{ white-space:nowrap; } .rep-tabla tr.rep-grupo td{ background:var(--c-verde-suave); color:var(--c-verde-osc); font-weight:700; border-top:2px solid var(--c-verde); } :root[data-theme="oscuro"] .rep-tabla tr.rep-grupo td{ color:var(--c-verde); } .rep-filtros .form-group{ margin-bottom:10px; } /* ---------- Calendario de citas ---------- */ .cal-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:linear-gradient(90deg,var(--c-head-a),var(--c-head-b)); color:#fff; } .cal-titulo{ font-size:20px; font-weight:600; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.2); text-align:center; } .cal-nav{ display:flex; gap:6px; min-width:140px; } .cal-vistas{ display:flex; min-width:140px; justify-content:flex-end; border-radius:6px; overflow:hidden; } .cal-vista-btn{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.55); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; margin-left:-1px; } .cal-vista-btn:first-child{ border-radius:6px 0 0 6px; margin-left:0; } .cal-vista-btn:last-child{ border-radius:0 6px 6px 0; } .cal-vista-btn:hover{ background:rgba(255,255,255,.32); } .cal-vista-btn.activa{ background:#fff; color:var(--c-celeste-osc); } :root[data-theme="oscuro"] .cal-vista-btn.activa{ background:var(--c-panel); color:var(--c-celeste-osc); } .cal-nombre-dia{ display:none; } .cal-cuerpo.vista-semana .cal-dia{ min-height:300px; } .cal-cuerpo.vista-semana .cal-chip{ white-space:normal; } .cal-dia-panel{ padding:16px; min-height:180px; background:var(--c-panel); } .cal-dia-panel.hoy{ box-shadow:inset 0 0 0 3px var(--c-celeste-osc); } .cal-dia-panel.nohab .cal-dia-cab{ opacity:.85; } .cal-dia-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .cal-dia-info strong{ font-size:18px; color:var(--c-celeste-osc); } .cal-dia-aviso, .cal-dia-vacio{ padding:22px; text-align:center; color:var(--c-muted); border:1px dashed var(--c-border); border-radius:8px; } .cal-dia-aviso{ background:repeating-linear-gradient(135deg,var(--c-panel-2),var(--c-panel-2) 8px,var(--c-panel) 8px,var(--c-panel) 16px); } .cal-dia-tabla{ margin-bottom:0; } .cal-fila{ cursor:pointer; } .cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .cal-semana > div{ text-align:center; padding:8px 4px; font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--c-celeste-osc); background:var(--c-celeste-suave); border-bottom:2px solid var(--c-celeste); } .cal-dia{ position:relative; min-height:104px; padding:4px 6px 6px; border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border); background:var(--c-panel); overflow:hidden; } .cal-dia:nth-child(7n){ border-right:0; } .cal-num{ text-align:right; font-size:13px; color:var(--c-muted); font-weight:600; } .cal-dia.fuera .cal-num{ opacity:.45; } .cal-dia.nohab{ background:repeating-linear-gradient(135deg,var(--c-panel-2),var(--c-panel-2) 8px,var(--c-panel) 8px,var(--c-panel) 16px); } .cal-dia.pasado{ opacity:.6; } .cal-dia.hab{ background:var(--c-verde-suave); cursor:pointer; transition:box-shadow .12s ease; } .cal-dia.hab .cal-num{ color:var(--c-verde-osc); } :root[data-theme="oscuro"] .cal-dia.hab .cal-num{ color:var(--c-verde); } .cal-dia.hab:hover{ box-shadow:inset 0 0 0 2px var(--c-verde); } .cal-dia.hab:hover::after{ content:"+ Reservar"; position:absolute; left:6px; top:5px; font-size:11px; font-weight:700; color:var(--c-verde-osc); } :root[data-theme="oscuro"] .cal-dia.hab:hover::after{ color:var(--c-verde); } .cal-dia.hoy{ box-shadow:inset 0 0 0 3px var(--c-celeste-osc); } .cal-dia.hoy.hab:hover{ box-shadow:inset 0 0 0 3px var(--c-celeste-osc); } .cal-dia.hoy .cal-num{ color:var(--c-celeste-osc); font-size:15px; } .cal-hoy-tag{ display:inline-block; margin-right:6px; padding:1px 6px; border-radius:8px; font-size:10px; letter-spacing:.5px; background:var(--c-celeste-osc); color:#fff; vertical-align:middle; } .cal-chip{ margin-top:3px; padding:2px 6px; border-radius:4px; font-size:11px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; color:#fff; } .cal-chip.est-res{ background:var(--st-res); color:#062b3b; } .cal-chip.est-conf{ background:var(--st-conf); color:#132b00; } .cal-chip.est-can{ background:var(--st-can); color:#2b1100; text-decoration:line-through; } .cal-chip.est-otro{ background:var(--c-muted); } .cal-chip:hover{ filter:brightness(1.12); } .cal-mas{ margin-top:2px; font-size:11px; color:var(--c-muted); } .cal-cont{ display:none; position:absolute; left:6px; bottom:6px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--c-celeste-osc); color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; } .cal-leyenda{ display:flex; flex-wrap:wrap; gap:8px 20px; padding:10px 16px; font-size:12px; color:var(--c-muted); border-top:1px solid var(--c-border); } .lg{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:4px; border:1px solid var(--c-border); } .lg-hoy{ box-shadow:inset 0 0 0 2px var(--c-celeste-osc); background:var(--c-panel); } .lg-hab{ background:var(--c-verde-suave); border-color:var(--c-verde); } .lg-no{ background:repeating-linear-gradient(135deg,var(--c-panel-2),var(--c-panel-2) 3px,var(--c-panel) 3px,var(--c-panel) 6px); } .lg-res{ background:var(--st-res); border-color:var(--st-res); } .lg-conf{ background:var(--st-conf); border-color:var(--st-conf); } .lg-can{ background:var(--st-can); border-color:var(--st-can); } .cita-info{ margin-bottom:14px; padding:8px 12px; border-radius:6px; background:var(--c-celeste-suave); color:var(--c-celeste-osc); font-weight:600; font-size:13px; } .text-success{ color:var(--c-verde-osc); } .text-warning{ color:var(--c-warn); } @media (max-width:700px){ .cal-cab{ flex-wrap:wrap; } .cal-nav, .cal-vistas{ min-width:0; } .cal-titulo{ order:3; width:100%; font-size:16px; } /* vista semana en celular: un dia por fila, con sus citas visibles */ .cal-semana.vista-semana{ display:none !important; } .cal-cuerpo.vista-semana{ grid-template-columns:1fr; } .cal-cuerpo.vista-semana .cal-dia{ min-height:0; border-right:0; } .cal-cuerpo.vista-semana .cal-nombre-dia{ display:inline; } .cal-cuerpo.vista-semana .cal-num{ text-align:left; } .cal-cuerpo.vista-semana .cal-chip, .cal-cuerpo.vista-semana .cal-mas{ display:block; } .cal-cuerpo.vista-semana .cal-cont{ display:none; } .cal-cuerpo.vista-semana .cal-dia.hab:hover::after{ content:""; } .cal-dia{ min-height:56px; padding:3px; } .cal-chip, .cal-mas{ display:none; } .cal-cont{ display:block; } .cal-dia.hab:hover::after{ content:""; } } /* ---------- Fotos ---------- */ .foto-mini{ display:inline-block; width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--c-verde); vertical-align:middle; } .foto-vacia{ background:var(--c-celeste-suave); color:var(--c-celeste-osc); text-align:center; line-height:40px; font-size:18px; } .foto-campo{ display:flex; align-items:center; gap:14px; } .foto-previa{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--c-verde); flex-shrink:0; } /* Ficha del medico junto a su horario (cita_medica.php) */ .horario-medico{ display:flex; align-items:flex-start; gap:24px; } .horario-medico > .table-responsive{ flex:1; min-width:0; } .medico-ficha{ width:170px; flex-shrink:0; text-align:center; } .medico-foto{ display:inline-block; width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid var(--c-verde); } .medico-foto.foto-vacia{ line-height:124px; font-size:52px; } .medico-nombre{ font-weight:600; margin-top:8px; line-height:1.3; } .medico-dato{ font-size:12px; color:var(--c-muted); } /* Medico en el modal de la cita */ .cita-medico{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .cita-medico-txt{ flex:1; min-width:0; } .cita-medico-txt .medico-nombre{ margin-top:0; } .cita-medico-txt .cita-info{ margin:6px 0 0; } .cita-medico-foto{ display:inline-block; width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid var(--c-verde); flex-shrink:0; } .cita-medico-foto.foto-vacia{ line-height:66px; font-size:28px; } @media (max-width:767px){ .horario-medico{ flex-direction:column; align-items:center; gap:12px; } .horario-medico > .table-responsive{ width:100%; } } .checkbox label{ color:var(--c-text); } /* ---------- Paginador ---------- */ .pagination > li > a{ background:var(--c-panel); border-color:var(--c-border); color:var(--c-celeste-osc); } .pagination > li > a:hover{ background:var(--c-celeste-suave); border-color:var(--c-border); color:var(--c-celeste-osc); } .pagination > .active > a, .pagination > .active > a:hover{ background:var(--c-verde-osc); border-color:var(--c-verde-osc); color:#fff; } .pagination > .disabled > a{ background:var(--c-panel-2); border-color:var(--c-border); color:var(--c-muted); } .help-block{ color:var(--c-muted); } /* ---------- Formularios ---------- */ .form-control{ background:var(--c-input-bg); color:var(--c-text); border-color:var(--c-border); } .form-control::placeholder{ color:var(--c-muted); } .form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control{ background:var(--c-panel-2); color:var(--c-text); opacity:1; } select.form-control[disabled]{ color:var(--c-muted); } .form-control:focus{ background:var(--c-input-bg); color:var(--c-text); border-color:var(--c-celeste); box-shadow:0 0 0 3px var(--c-focus); } .input-group-addon{ background:var(--c-celeste-suave); color:var(--c-celeste-osc); border-color:var(--c-border); } .buscador .form-control{ border-color:var(--c-verde); } .buscador .input-group{ width:420px; max-width:100%; } .buscador .input-group .form-control{ width:100%; } label{ color:var(--c-text); } /* ---------- Modal ---------- */ .modal-content{ background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); } .modal-header{ background:linear-gradient(90deg,var(--c-head-a),var(--c-head-b)); color:#fff; border-radius:6px 6px 0 0; border-bottom:0; } .modal-header .close{ color:#fff; opacity:.9; text-shadow:none; } .modal-footer{ border-top-color:var(--c-border); } .close{ color:var(--c-text); text-shadow:none; } /* ---------- Avisos ---------- */ :root[data-theme="oscuro"] .alert-success{ background:var(--c-verde-suave); border-color:var(--c-verde-osc); color:var(--c-verde); } :root[data-theme="oscuro"] .alert-warning{ background:var(--c-warn-bg); border-color:var(--c-warn); color:var(--c-warn); } :root[data-theme="oscuro"] .alert-danger{ background:var(--c-danger-bg); border-color:var(--c-danger); color:var(--c-danger); } :root[data-theme="oscuro"] .alert-info{ background:var(--c-celeste-suave); border-color:var(--c-celeste-osc); color:var(--c-celeste-osc); } /* ---------- Boton de tema (claro / oscuro) ---------- */ .tema-btn{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background-color .15s ease; } .tema-btn:hover{ background:rgba(255,255,255,.32); } .tema-btn-flotante{ position:fixed; top:12px; right:12px; z-index:50; } /* ---------- Login ---------- */ body.login{ display:flex; flex-direction:column; } body.login .barra{ margin-bottom:0; text-align:center; position:relative; } body.login .barra h1{ font-size:24px; letter-spacing:.5px; } .login-centro{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px; } .login-tarjeta{ width:100%; max-width:380px; padding:28px 26px; } .login-tarjeta h2{ margin:0 0 4px; font-size:22px; color:var(--c-celeste-osc); text-align:center; } .login-tarjeta .sub{ text-align:center; color:var(--c-muted); margin-bottom:20px; } /* Logotipo sobre el formulario de ingreso (version de texto blanco en modo oscuro) */ .login-logo{ display:block; width:100%; max-width:250px; height:auto; margin:0 auto 18px; } .login-logo.logo-oscuro{ display:none; } .login-logo-sistema{ display:block; max-width:100%; max-height:70px; height:auto; margin:0 auto 4px; } .login-logo-sistema.logo-oscuro{ display:none; } :root[data-theme="oscuro"] .login-logo-sistema.logo-claro{ display:none; } :root[data-theme="oscuro"] .login-logo-sistema.logo-oscuro{ display:block; } :root[data-theme="oscuro"] .login-logo.logo-claro{ display:none; } :root[data-theme="oscuro"] .login-logo.logo-oscuro{ display:block; } .login-tarjeta .alert{ margin:16px 0 0; } /* ---------- Portal principal (index_principal.php) ---------- */ html.portal, html.portal body{ margin:0; padding:0; height:100%; overflow:hidden; } /* 100dvh: en moviles 100vh incluye la barra del navegador y corta la parte inferior */ .main-container{ display:flex; flex-direction:column; height:100vh; height:100dvh; } .header-area{ height:60px; flex-shrink:0; position:relative; z-index:20; } .content-area{ flex-grow:1; width:100%; position:relative; background:var(--c-bg-a); } .full-iframe{ width:100%; height:100%; border:0; display:block; background:transparent; } #cl-header{ display:flex; align-items:center; gap:12px; height:60px; padding:0 14px; box-sizing:border-box; background:linear-gradient(90deg,var(--c-head-a),var(--c-head-b)); border-bottom:3px solid var(--c-verde-osc); box-shadow:0 2px 8px var(--c-shadow); color:var(--c-head-text); } .cl-marca{ display:flex; align-items:center; gap:8px; flex-shrink:0; font-weight:700; font-size:16px; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.2); } .cl-marca .glyphicon{ font-size:20px; } /* Logotipo de la clinica en la barra del portal: enlaza al dashboard (inicio.php). Version de texto blanco en modo oscuro */ .cl-marca-logo{ display:block; flex-shrink:0; line-height:0; } .cl-marca-logo img{ display:block; height:46px; width:auto; } .cl-marca-logo .logo-oscuro{ display:none; } :root[data-theme="oscuro"] .cl-marca-logo .logo-claro{ display:none; } :root[data-theme="oscuro"] .cl-marca-logo .logo-oscuro{ display:block; } .cl-header-menu{ flex-grow:1; min-width:0; } /* Datos de trabajo a la derecha: [RUC - Establecimiento codigo] NOMBRE [SERIE ...] + serie activa */ .cl-info{ flex-shrink:1; min-width:0; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; font-size:12px; } .cl-info-emp{ opacity:.9; letter-spacing:.2px; } .cl-info-usr{ margin-left:6px; font-size:13px; letter-spacing:.3px; } .cl-serie{ flex-shrink:0; max-width:190px; height:30px; padding:0 6px; font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); border-radius:6px; cursor:pointer; } .cl-serie:focus{ outline:2px solid rgba(255,255,255,.7); outline-offset:1px; } .cl-serie option{ color:var(--c-text); background:var(--c-menu-bg); } @media (max-width:1100px){ .cl-info-emp{ display:none; } } .cl-cerrar{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; background:rgba(255,255,255,.18); color:#fff !important; border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:6px 12px; font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .15s ease; } .cl-cerrar:hover{ background:#c0392b; border-color:#c0392b; } /* Menu de navegacion (index_menu.php) */ ul.cl-menu, ul.cl-menu ul{ list-style:none; margin:0; padding:0; } ul.cl-menu{ display:flex; gap:4px; } ul.cl-menu > li{ position:relative; } ul.cl-menu > li > a{ display:block; padding:8px 14px; color:#fff; text-decoration:none; font-weight:600; font-size:14px; border-radius:6px; text-shadow:0 1px 2px rgba(0,0,0,.2); } ul.cl-menu > li:hover > a, ul.cl-menu > li:focus-within > a{ background:rgba(255,255,255,.25); } ul.cl-menu ul{ display:none; position:absolute; top:100%; left:0; min-width:210px; z-index:200; background:var(--c-menu-bg); border:1px solid var(--c-border); border-top:3px solid var(--c-verde); border-radius:0 0 8px 8px; box-shadow:0 8px 22px var(--c-shadow); padding:4px 0; } ul.cl-menu > li:hover > ul, ul.cl-menu > li:focus-within > ul{ display:block; } ul.cl-menu ul a{ display:block; padding:9px 16px; color:var(--c-text); text-decoration:none; font-size:14px; } ul.cl-menu ul a:hover{ background:var(--c-menu-hover); color:var(--c-celeste-osc); } /* Boton hamburguesa (solo en pantallas angostas) */ .cl-hamburguesa{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; flex-shrink:0; padding:0; cursor:pointer; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); border-radius:8px; } .cl-hamburguesa span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .cl-hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .cl-hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; } .cl-hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:780px){ .cl-hamburguesa{ display:flex; } .cl-marca span.txt{ display:none; } .cl-marca-logo img{ height:38px; } .cl-info{ display:none; } .cl-serie{ max-width:110px; } .cl-cerrar span, .tema-btn span{ display:none; } .cl-cerrar, #cl-header .tema-btn{ padding:8px; border-radius:50%; } .cl-header-menu{ position:absolute; top:60px; left:0; right:0; display:none; max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); overflow-y:auto; background:var(--c-menu-bg); border-bottom:3px solid var(--c-verde-osc); box-shadow:0 10px 24px var(--c-shadow); } .cl-header-menu.abierto{ display:block; } ul.cl-menu{ display:block; } ul.cl-menu > li > a{ color:var(--c-celeste-osc); text-shadow:none; border-radius:0; border-bottom:1px solid var(--c-border); background:var(--c-celeste-suave); } ul.cl-menu > li:hover > a{ background:var(--c-celeste-suave); } ul.cl-menu ul{ display:block; position:static; border:0; box-shadow:none; border-radius:0; background:var(--c-menu-bg); } ul.cl-menu ul a{ padding-left:28px; border-bottom:1px solid var(--c-border); } } /* ---------- Pagina de inicio (inicio.php) ---------- */ /* Emision de comprobantes (gen_cpe.php) */ .cpe-tipo{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; } .cpe-tipo-op{ display:flex; flex-direction:column; margin:0; padding:10px 16px; min-width:190px; cursor:pointer; border:2px solid var(--c-border); border-radius:8px; background:var(--c-panel-2); font-weight:600; } .cpe-tipo-op input{ position:absolute; opacity:0; pointer-events:none; } .cpe-tipo-op small{ font-weight:400; color:var(--c-muted); } .cpe-tipo-op:has(input:checked){ border-color:var(--c-celeste-osc); background:var(--c-celeste-suave); color:var(--c-celeste-osc); } .cpe-tipo-op:has(input:focus-visible){ outline:2px solid var(--c-celeste); outline-offset:2px; } .cpe-tipo-op.deshabilitado{ opacity:.5; cursor:not-allowed; } .cpe-caja{ margin-left:auto; font-size:12px; } .cpe-mayus{ text-transform:uppercase; } .cpe-detalle{ margin-top:16px; } .cpe-buscador{ position:relative; } .cpe-resultados{ display:none; position:absolute; left:15px; right:15px; top:100%; z-index:50; max-height:320px; overflow-y:auto; background:var(--c-menu-bg); border:1px solid var(--c-border); border-radius:0 0 8px 8px; box-shadow:0 8px 22px var(--c-shadow); } .cpe-resultados.abierto{ display:block; } .cpe-res{ display:flex; align-items:baseline; gap:8px; width:100%; padding:8px 12px; border:0; border-bottom:1px solid var(--c-border); background:transparent; color:var(--c-text); text-align:left; font-size:13px; } .cpe-res:hover, .cpe-res:focus{ background:var(--c-menu-hover); outline:none; } .cpe-res .cod{ min-width:90px; color:var(--c-muted); font-size:12px; } .cpe-res .uni{ color:var(--c-muted); font-size:11px; } .cpe-res .pre{ margin-left:auto; font-weight:600; white-space:nowrap; } .cpe-res-vacio{ padding:10px 12px; color:var(--c-muted); font-size:13px; } .cpe-items input.form-control{ width:95px; margin-left:auto; } .cpe-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:14px; } .cpe-vuelto{ display:flex; align-items:center; gap:8px; } .cpe-vuelto label{ margin:0; } .cpe-vuelto input{ width:110px; } .cpe-totales{ min-width:260px; font-size:14px; } .cpe-totales td{ padding:3px 0 3px 18px; } .cpe-totales td:first-child{ padding-left:0; color:var(--c-muted); } .cpe-totales .cpe-total td{ padding-top:8px; border-top:2px solid var(--c-border); font-size:20px; font-weight:700; color:var(--c-celeste-osc); } .cpe-emitido{ margin-bottom:16px; border-top-color:var(--c-verde-osc); } .cpe-emitido p{ margin:0 0 4px; } /* Mi Bandeja: pendientes de envio a SUNAT (cpe_bandeja.php) */ .bdj{ background:var(--c-panel); border:1px solid var(--c-border); border-top:4px solid var(--c-head-b); border-radius:6px; box-shadow:0 3px 14px var(--c-shadow); } .bdj-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; background:var(--c-celeste-suave); border-bottom:1px solid var(--c-border); } .bdj-titulo{ font-size:17px; min-width:110px; } .bdj-barra select.form-control{ width:auto; min-width:240px; } .bdj-leyenda{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-left:auto; font-size:12px; color:var(--c-muted); } .bdj-leyenda span{ display:inline-flex; align-items:center; gap:5px; } .bdj-leyenda .bdj-est{ width:12px; height:12px; font-size:0; } .bdj-leyenda strong{ color:var(--c-text); } .bdj-tabla{ width:100%; border-collapse:collapse; font-size:13px; } .bdj-tabla td, .bdj-tabla th{ padding:4px 6px; vertical-align:middle; } .bdj-grupo td{ padding:9px 30px; background:#d58c95; color:#fff; font-weight:700; } :root[data-theme="oscuro"] .bdj-grupo td{ background:#7a3a43; } .bdj-cab th{ padding:7px 6px; background:var(--c-head-b); color:#f5f5f5; font-weight:700; white-space:nowrap; } :root[data-theme="oscuro"] .bdj-cab th{ background:#41484d; } .bdj-fila:nth-child(odd) td{ background:var(--c-panel-2); } .bdj-fila:hover td{ background:var(--c-menu-hover); } .bdj-fecha{ font-size:12px; line-height:1.25; white-space:nowrap; } .bdj-num{ font-weight:700; white-space:nowrap; } .bdj-razon{ min-width:180px; } .bdj-total{ font-weight:700; padding-right:14px !important; } /* Estado segun dias desde la emision */ .bdj-est{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:8px; font-weight:700; color:#fff; } .bdj-est.verde{ background:#2e9e4f; } .bdj-est.naranja{ background:#e8871e; } .bdj-est.rojo{ background:#d62828; animation:bdj-parpadeo 1s steps(2, start) infinite; } .bdj-leyenda .bdj-est.rojo{ animation:none; } @keyframes bdj-parpadeo{ to{ opacity:.2; } } @media (prefers-reduced-motion:reduce){ .bdj-est.rojo{ animation:none; box-shadow:0 0 0 3px rgba(214,40,40,.35); } } /* Acciones */ .bdj-acciones{ white-space:nowrap; } .bdj-acc{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0 1px; border-radius:4px; color:var(--c-text); text-decoration:none; font-size:14px; } a.bdj-acc:hover, a.bdj-acc:focus{ background:var(--c-menu-hover); color:var(--c-celeste-osc); text-decoration:none; } .bdj-acc.amarillo{ background:#f5c518; color:#5a4500; } .bdj-acc.bdj-bt{ color:#0a6ed1; } a.bdj-acc.bdj-bt:hover{ color:#0a6ed1; } .bdj-acc.deshabilitado{ opacity:.35; cursor:not-allowed; } .bdj-txt{ font-size:9px; font-weight:700; border:1.5px solid currentColor; border-radius:3px; padding:1px 2px; } .bdj-acc.bdj-wa{ width:46px; background:#25d366; color:#fff; } a.bdj-acc.bdj-wa:hover{ background:#1ebe5a; color:#fff; } .bdj-enviar{ display:inline-block; padding:3px 18px; background:#e21b1b; color:#fff; font-weight:700; border-radius:2px; } .bdj-enviar.deshabilitado{ opacity:.45; cursor:not-allowed; } .bdj-vacio{ padding:30px 0; margin:0; font-size:15px; } /* Accesos directos del escritorio (index_inicio.php) */ .escritorio{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; } .escritorio-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:130px; padding:18px 12px; background:var(--c-panel); border:1px solid var(--c-border); border-top:4px solid var(--c-celeste-osc); border-radius:10px; box-shadow:0 3px 14px var(--c-shadow); color:var(--c-text); text-align:center; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .escritorio-btn:hover, .escritorio-btn:focus{ transform:translateY(-3px); box-shadow:0 8px 20px var(--c-shadow); border-top-color:var(--c-verde-osc); color:var(--c-text); text-decoration:none; } .escritorio-btn .glyphicon{ font-size:32px; color:var(--c-celeste-osc); } .escritorio-btn:hover .glyphicon{ color:var(--c-verde-osc); } :root[data-theme="oscuro"] .escritorio-btn:hover .glyphicon{ color:var(--c-verde); } .escritorio-btn .nom{ font-weight:600; font-size:15px; line-height:1.2; } .escritorio-btn .grp{ font-size:12px; color:var(--c-muted); } @media (max-width:480px){ .escritorio{ grid-template-columns:repeat(2, 1fr); gap:10px; } .escritorio-btn{ min-height:110px; } } .saludo{ margin:0 0 4px; color:var(--c-celeste-osc); font-weight:600; } .atajos{ display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; } .atajo{ flex:1 1 220px; display:block; text-decoration:none; color:var(--c-text); background:var(--c-panel-2); border:1px solid var(--c-border); border-left:4px solid var(--c-celeste); border-radius:8px; padding:16px; transition:transform .12s ease, box-shadow .12s ease; } .atajo:hover{ transform:translateY(-2px); box-shadow:0 6px 16px var(--c-shadow); color:var(--c-text); text-decoration:none; } .atajo.verde{ border-left-color:var(--c-verde); } .atajo .num{ font-size:30px; font-weight:700; color:var(--c-verde-osc); line-height:1.1; } :root[data-theme="oscuro"] .atajo .num{ color:var(--c-verde); } .atajo .lbl{ color:var(--c-muted); font-size:13px; } /* ---------- Dashboard (inicio.php) ---------- */ .db-inicio{ padding-top:24px; } .db-filtros .form-group{ margin-bottom:8px; } .db-botones{ padding-top:24px; display:flex; gap:6px; flex-wrap:wrap; } .db-periodo{ margin-top:2px; font-size:13px; } .db-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:20px; } .db-kpi{ display:block; background:var(--c-panel); border-radius:10px; box-shadow:0 3px 14px var(--c-shadow); padding:14px 16px; border-left:6px solid var(--kc); color:var(--c-text); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; } a.db-kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 16px var(--c-shadow); color:var(--c-text); text-decoration:none; } .db-kpi .n{ font-size:32px; font-weight:700; line-height:1.1; } .db-kpi .lbl{ color:var(--c-muted); font-size:13px; } .db-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:18px; margin-top:20px; } .db-card h4{ margin:0 0 14px; font-size:16px; font-weight:600; color:var(--c-celeste-osc); } .db-card-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px 16px; flex-wrap:wrap; } .db-leyenda{ display:flex; gap:4px 14px; flex-wrap:wrap; font-size:12px; color:var(--c-muted); margin-top:2px; } .db-leyenda i, .db-anillo-lista i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px; } .db-anillo-wrap{ display:flex; align-items:center; justify-content:center; gap:18px 26px; flex-wrap:wrap; } .db-anillo{ width:170px; height:170px; flex-shrink:0; } .db-anillo-fondo{ stroke:var(--c-panel-2); } .db-anillo circle{ transition:opacity .15s ease; } .db-anillo circle:hover{ opacity:.8; } .db-anillo-num{ text-anchor:middle; font-size:8px; font-weight:700; fill:var(--c-text); } .db-anillo-lbl{ text-anchor:middle; font-size:3.4px; fill:var(--c-muted); } .db-anillo-lista{ list-style:none; margin:0; padding:0; font-size:14px; } .db-anillo-lista li{ margin:7px 0; display:flex; align-items:center; gap:4px; } .db-anillo-lista .nom{ min-width:92px; } .db-anillo-lista strong{ min-width:28px; text-align:right; } .db-fila{ display:flex; align-items:center; gap:10px; margin:8px 0; } .db-nombre{ width:34%; min-width:110px; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; } .db-pista{ flex:1; display:flex; height:20px; background:var(--c-panel-2); border-radius:5px; overflow:hidden; } .db-seg{ display:block; height:100%; transition:filter .15s ease; } .db-seg:hover{ filter:brightness(1.1); } .db-total{ width:36px; text-align:right; font-weight:700; font-size:13px; } .db-vacio{ text-align:center; padding:26px 0; margin:0; } .db-nota{ font-size:12px; margin:8px 0 0; } @media (max-width:900px){ .db-grid{ grid-template-columns:minmax(0,1fr); } .db-nombre{ width:40%; } .db-botones{ padding-top:0; } } /* ---------- Mantenimientos (tbl_*.php) ---------- */ .tbl-pagina{ padding-top:16px; padding-bottom:24px; } .tbl-titulo{ margin:0 0 16px; font-weight:600; color:var(--c-celeste-osc); } .tbl-titulo .glyphicon{ margin-right:6px; } .tbl-barra{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; } .tbl-barra .input-group{ flex:1 1 240px; max-width:420px; } .tbl-barra .form-control.tbl-filtro{ width:auto; flex:0 1 200px; } .tbl-barra .btn-clinica{ margin-left:auto; } .tbl-tabla{ margin-bottom:0; font-size:13px; } .tbl-tabla td.acciones{ white-space:nowrap; text-align:right; } .tbl-tabla td.acciones > *{ margin-left:4px; } .tbl-tabla tr.inactivo td{ color:var(--c-muted); } .tbl-num{ text-align:right; white-space:nowrap; } .tbl-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; } .tbl-pie .pagination{ margin:0; } .tbl-form .form-group{ margin-bottom:12px; } .tbl-form .requerido::after{ content:" *"; color:var(--c-danger); } .tbl-botones{ display:flex; gap:8px; margin-top:6px; } .tbl-scroll{ overflow-x:auto; } /* Reportes de comprobantes (rep_cpe.php, rep_cpe_det.php) */ .rcp{ background:var(--c-panel); border:1px solid var(--c-border); border-radius:6px; box-shadow:0 3px 14px var(--c-shadow); padding-bottom:10px; } .rcp-titulo{ margin:0; padding:14px 16px 8px; font-size:22px; font-weight:400; } .rcp-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 14px; margin:0 12px 12px; background:var(--c-panel-2); border:1px solid var(--c-border); border-radius:4px; } .rcp-barra label{ margin:0; font-weight:400; } .rcp-barra .form-control{ width:auto; } .rcp-barra .rcp-q{ width:190px; } .rcp-barra .rcp-num{ width:95px; } .rcp-barra .rcp-excel{ margin-left:auto; } .rcp > .alert{ margin:0 12px 10px; } .rcp .tbl-scroll{ margin:0 12px; } .rcp-tabla{ width:100%; border-collapse:collapse; font-size:13px; } .rcp-tabla th{ padding:6px; background:#8a8f8a; color:#fff; font-weight:700; white-space:nowrap; text-align:left; } .rcp-det th{ background:#434d38; } .rcp-tabla td{ padding:4px 6px; vertical-align:top; border-bottom:1px solid var(--c-border); } .rcp-tabla tbody tr:nth-child(even) td{ background:var(--c-panel-2); } .rcp-tabla tr.rcp-grupo td{ background:#cfd0cc; color:#222; font-weight:700; padding:7px 40px; } .rcp-det tr.rcp-grupo td{ background:#9db07a; } :root[data-theme="oscuro"] .rcp-tabla tr.rcp-grupo td{ background:#4a4f45; color:#f5f5f5; } .rcp-tabla tr.rcp-subtotal td{ background:var(--c-panel-2); color:var(--c-muted); font-size:12px; border-bottom:2px solid var(--c-border); } .rcp-tabla tr.rcp-subtotal td.tbl-num{ color:var(--c-text); font-weight:700; } .rcp-tabla tr.rcp-total td{ padding:8px 6px; font-weight:700; background:var(--c-celeste-suave); color:var(--c-celeste-osc); } .rcp-fecha{ white-space:nowrap; font-size:12px; } .rcp-doc{ font-size:12px; } .rcp-det tr.rcp-cont td{ border-top:0; } .rcp-det .rcp-sep{ border-left:6px solid #9db07a; } .rcp-acciones{ white-space:nowrap; } .rcp-ico{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:28px; margin:1px; border-radius:5px; font-size:10px; font-weight:800; color:#fff; text-decoration:none; border:1px solid rgba(0,0,0,.15); } .rcp-ico:hover{ color:#fff; text-decoration:none; filter:brightness(1.1); } .rcp-xml{ background:#2e8b57; } .rcp-pdf{ background:#c0392b; } .rcp-cdr{ background:#7b52ab; } .rcp-ico.deshabilitado{ opacity:.3; cursor:not-allowed; } .rcp-estado{ white-space:nowrap; } .rcp-e02{ color:var(--c-warn); } .rcp-e05, .rcp-e06{ color:var(--c-danger); } .rcp-pie{ font-size:12px; margin:8px 14px 0; } /* Kardex (rep_kardex.php, rep_kardex_ver.php) */ .kdx{ background:var(--c-panel); border:1px solid var(--c-border); border-radius:6px; box-shadow:0 3px 14px var(--c-shadow); padding-bottom:10px; } .kdx-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; background:var(--c-panel-2); border-bottom:1px solid var(--c-border); border-radius:6px 6px 0 0; } .kdx-barra label{ margin:0; font-weight:400; } .kdx-barra .form-control{ width:auto; } .kdx-barra .kdx-q{ width:200px; } .kdx-titulo{ font-size:20px; margin-right:12px; } .kdx-check{ display:inline-flex; align-items:center; gap:4px; } .kdx-info{ font-size:12px; margin:8px 14px; } .kdx > .alert{ margin:10px 14px 0; } .kdx > .tbl-pie{ padding:0 14px; } .kdx-tabla{ width:100%; border-collapse:collapse; font-size:13px; } .kdx-tabla th{ padding:7px 6px; background:#3f4a36; color:#f5f5f5; font-weight:700; white-space:nowrap; border-right:1px solid rgba(255,255,255,.15); } .kdx-tabla td{ padding:5px 6px; border-bottom:1px solid var(--c-border); border-right:1px solid var(--c-border); vertical-align:middle; } .kdx-tabla tbody tr:nth-child(even) td{ background:var(--c-panel-2); } .kdx-tabla tbody tr:hover td{ background:var(--c-menu-hover); } .kdx-inactivo td{ color:var(--c-muted); text-decoration:line-through; } .kdx-inactivo td.kdx-acciones{ text-decoration:none; } .kdx-acciones{ white-space:nowrap; text-align:center; } .kdx-acciones form{ display:inline; } .kdx-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; margin:0 1px; border-radius:5px; border:1px solid var(--c-border); background:var(--c-panel-2); color:var(--c-text); cursor:pointer; font-size:15px; text-decoration:none; } .kdx-btn:hover{ text-decoration:none; filter:brightness(.95); } .kdx-lupa{ color:#b8860b; } /* Ventana de movimientos */ body.kdx-ver{ background:var(--c-panel); color:var(--c-text); } .kdx-ver-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:#5a5f55; color:#f5f5f5; } .kdx-ver-cab h1{ margin:0; font-size:18px; letter-spacing:.3px; } .kdx-mov th.kdx-grupo{ text-align:center; } .kdx-mov td.kdx-saldo, .kdx-mov th.kdx-saldo{ background:rgba(0,0,0,.05); font-weight:600; } .kdx-mov tr.kdx-ultimo td.kdx-saldo{ font-weight:800; } .kdx-fecha{ white-space:nowrap; font-size:12px; } .kdx-pie{ font-size:12px; margin:8px 12px; } /* Reporte de stock (rep_stock.php): saldos negativos en rojo */ .stk-negativo td{ color:var(--c-danger); } .stk-nota{ font-size:12px; margin:0 0 10px; } /* Bandeja de compras (compra_bandeja.php) */ .cmp-botones{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; } .tbl-barra .cmp-botones .btn-clinica{ margin-left:0; } .cmp-pendiente{ background:var(--c-warn-bg); color:var(--c-warn); border:1px solid var(--c-warn); white-space:nowrap; } /* Foto del articulo (tbl_articulo.php) */ .art-foto{ display:flex; flex-direction:column; gap:6px; } .art-foto img{ width:96px; height:96px; object-fit:cover; border-radius:6px; border:1px solid var(--c-border); } .art-desc img{ width:28px; height:28px; object-fit:cover; border-radius:4px; margin-right:6px; vertical-align:middle; border:1px solid var(--c-border); }