:root { --primary:#0f766e; --primary-dark:#115e59; --ink:#18302f; --muted:#69807e; --line:#dfe9e7; --bg:#f4f8f7; --white:#fff; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; font-size:17px; color:var(--ink); background:var(--bg); }
small { font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.sidebar { position:fixed; inset:0 auto 0 0; width:255px; padding:28px 20px; background:#102f2d; color:white; display:flex; flex-direction:column; }
.brand { display:flex; gap:12px; align-items:center; padding:0 8px 30px; }
.brand-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:#34b8aa; font-size:21px; font-weight:800; }
.brand strong,.brand small { display:block; } .brand small { color:#96b8b4; margin-top:3px; }
nav { display:grid; gap:7px; }.nav-item { border:0; border-radius:9px; padding:12px 14px; text-align:left; color:#bcd1ce; background:transparent; font-weight:600; }.nav-item:hover,.nav-item.active { background:#1b4945; color:white; }
.local-badge { margin-top:auto; padding:14px; border:1px solid #29514e; border-radius:10px; color:#aac4c1; font-size:12px; }.local-badge span { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#45d39e; }
main { margin-left:255px; padding:36px 44px 52px; max-width:1550px; }
header,.section-actions,.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; } header { margin-bottom:30px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:31px; } h2 { margin-bottom:7px; font-size:24px; } .eyebrow { color:var(--primary); letter-spacing:.12em; font-size:12px; font-weight:800; margin-bottom:6px; }.date { color:var(--muted); text-transform:capitalize; }
.view { display:none; }.view.active { display:block; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }.stats article,.panel,.search { background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 18px rgba(31,75,70,.04); }.stats article { padding:24px; }.stats span { display:block; color:var(--muted); font-size:15px; }.stats strong { display:block; font-size:36px; margin-top:12px; }
.panel { padding:22px; }.panel-heading { margin-bottom:14px; }.panel-heading p,.section-actions p { color:var(--muted); margin:0; }.section-actions { margin-bottom:20px; }
.primary,.secondary,.status-button { border:0; border-radius:9px; padding:10px 15px; font-weight:700; }.primary { background:var(--primary); color:white; }.primary:hover { background:var(--primary-dark); }.secondary { background:#eaf1f0; color:var(--ink); }
.list-row { display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) minmax(120px,.8fr) auto; align-items:center; gap:14px; padding:15px 5px; border-top:1px solid var(--line); }.list-row:first-child { border-top:0; }.list-row strong,.list-row small { display:block; }.list-row small,.muted { color:var(--muted); margin-top:4px; }.avatar { display:flex; align-items:center; gap:12px; }.avatar span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#dff4f0; color:var(--primary); font-weight:800; }.status { width:max-content; padding:5px 9px; border-radius:20px; font-size:12px; background:#e8f6f2; color:#08745f; }.status.cancelada { background:#feeceb; color:var(--danger); }.status.completada { background:#edf1f1; color:#526563; }.status-button { padding:7px 9px; background:#edf3f2; color:#456; font-size:12px; }
.search { padding:12px; margin-bottom:15px; }.search input { width:100%; border:0; outline:0; background:transparent; }.empty { padding:34px; text-align:center; color:var(--muted); }
.doctor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }.doctor-card { position:relative; padding:22px; border:1px solid var(--line); border-top:5px solid var(--doctor-color,var(--primary)); border-radius:14px; background:white; box-shadow:0 4px 18px rgba(31,75,70,.04); }.doctor-card-head { display:flex; gap:13px; align-items:center; margin-bottom:18px; }.doctor-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--doctor-color,var(--primary)); font-weight:800; }.doctor-card h3 { margin:0 0 4px; }.doctor-card p { margin:0; color:var(--muted); }.doctor-contact { display:grid; gap:6px; padding:14px 0; border-top:1px solid var(--line); color:#526966; font-size:14px; }.calendar-status { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:14px; border-top:1px solid var(--line); }.connected { color:#08745f; font-weight:700; font-size:13px; }.not-connected { color:var(--muted); font-size:13px; }.google-button { border:1px solid #cbd8d6; border-radius:8px; padding:8px 11px; background:white; color:#334a48; font-weight:700; font-size:13px; }.setup-notice { display:none; margin-bottom:18px; padding:14px 17px; border:1px solid #edd48b; border-radius:10px; background:#fff8df; color:#6c571c; font-size:14px; }.setup-notice.show { display:block; }
.doctor-edit { position:absolute; right:15px; top:15px; border:1px solid #dbe5ee; border-radius:8px; padding:7px 10px; color:#305080; background:white; font-size:11px; font-weight:800; }.appointment-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.action-button { border:0; border-radius:7px; padding:7px 9px; color:#305080; background:#edf4fb; font-size:10px; font-weight:800; }.action-button:hover { background:#dfeef9; }.action-button.danger { color:#a92e2e; background:#fff0ef; }.action-button.warning { color:#9a621e; background:#fff5e6; }.status.no_asistio { color:#98611d; background:#fff3df; }
.action-button.delete { color:#8f2330; border:1px solid #f0cbd0; background:#fff7f7; }.action-button.delete:hover { color:white; border-color:#b93443; background:#b93443; }
.appointment-menu { position:relative; margin-left:auto; }.appointment-menu summary { width:34px; height:34px; display:grid; place-items:center; border:1px solid #dce6ef; border-radius:9px; color:#516985; background:white; font-size:23px; font-weight:800; line-height:1; cursor:pointer; list-style:none; }.appointment-menu summary::-webkit-details-marker { display:none; }.appointment-menu summary:hover,.appointment-menu[open] summary { color:#305080; border-color:#9ccfe2; background:#eef8fc; }.appointment-menu-popover { position:absolute; z-index:30; top:40px; right:0; width:205px; padding:7px; border:1px solid #dfe7f0; border-radius:12px; background:white; box-shadow:0 16px 38px rgba(25,53,88,.18); }.appointment-menu-popover button { width:100%; display:flex; align-items:center; gap:9px; padding:9px 10px; border:0; border-radius:8px; color:#425a76; text-align:left; background:transparent; font-size:11px; font-weight:700; }.appointment-menu-popover button:hover { color:#305080; background:#edf6fb; }.appointment-menu-popover button span { width:21px; height:21px; display:grid; place-items:center; border-radius:6px; color:#305080; background:#e8f3fa; font-size:12px; font-weight:900; }.appointment-menu-popover button.warning { color:#93601e; }.appointment-menu-popover button.danger { color:#a53232; }.appointment-menu-popover button.delete { margin-top:5px; padding-top:10px; color:#a02d3a; border-top:1px solid #edf0f4; border-radius:0 0 8px 8px; }
.appointment-menu[open] { z-index:40; }
.appointment-menu-popover .menu-separator { height:1px; margin:5px 4px; background:#e9eef3; }
.appointment-status-select { width:125px; padding:7px 25px 7px 9px; border:1px solid transparent; border-radius:20px; outline:0; font-size:10px; font-weight:800; cursor:pointer; }.appointment-status-select.programada { color:#18785f; background:#e3f7f0; }.appointment-status-select.completada { color:#526563; background:#edf1f1; }.appointment-status-select.no_asistio { color:#98611d; background:#fff3df; }.appointment-status-select.cancelada { color:#b42318; background:#feeceb; }.appointment-status-select:focus { border-color:#10a0e0; box-shadow:0 0 0 3px rgba(16,160,224,.12); }
#print-area { display:none; }
@media print { body > *:not(#print-area) { display:none !important; } #print-area { display:block; padding:30px; color:#172b4d; background:white; font-family:Arial,sans-serif; } .print-header { display:flex; align-items:center; gap:25px; padding-bottom:20px; border-bottom:2px solid #305080; }.print-header img { width:180px; height:90px; object-fit:cover; object-position:center; }.print-header h1 { margin:0 0 5px; color:#305080; font-size:25px; }.print-header p { margin:0; color:#607089; }.print-details { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; padding:28px 0; }.print-details p { margin:0; padding:12px; border:1px solid #dfe6ef; border-radius:8px; }.print-details span,.print-details strong { display:block; }.print-details span { margin-bottom:5px; color:#718096; font-size:11px; text-transform:uppercase; }.print-details strong { font-size:15px; } #print-area footer { padding-top:18px; border-top:1px solid #dfe6ef; color:#607089; text-align:center; font-size:12px; } }
.color-picker { margin:0; padding:0; border:0; }.color-picker legend { margin-bottom:9px; color:#3d5553; font-size:13px; font-weight:700; }.color-options { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.color-options label { display:flex; align-items:center; gap:7px; padding:9px; border:1px solid #d7e2e0; border-radius:9px; color:#506461; font-size:12px; cursor:pointer; }.color-options input { position:absolute; opacity:0; pointer-events:none; }.color-options span { width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:var(--color); box-shadow:0 0 0 2px white,0 0 0 3px #c4d0ce; }.color-options label:has(input:checked) { border-color:#18302f; background:#f0f6f5; color:#18302f; font-weight:800; }.color-options label:has(input:checked) span { box-shadow:0 0 0 2px white,0 0 0 4px var(--color); }.doctor-agenda-label { display:inline-flex; align-items:center; gap:6px; }.doctor-agenda-label i { width:9px; height:9px; border-radius:50%; background:var(--doctor-color,#82908e); }
.record-button,.back-button { border:0; color:var(--primary); background:transparent; font-weight:700; }.back-button { padding:0; margin-bottom:18px; }.record-header { display:flex; gap:18px; align-items:center; margin-bottom:20px; padding:22px; border-radius:14px; color:white; background:linear-gradient(120deg,#105e58,#168a7f); }.record-header .avatar-large { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#ffffff24; font-size:20px; font-weight:800; }.record-header h2 { margin:0 0 5px; }.record-header p { margin:0; color:#cdebe7; }.record-tabs { display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:24px; }.record-tab { border:0; padding:12px 15px; background:transparent; color:var(--muted); font-weight:700; border-bottom:3px solid transparent; }.record-tab.active { color:var(--primary); border-bottom-color:var(--primary); }.record-tab-panel { display:none; }.record-tab-panel.active { display:block; }.record-entry { padding:18px 4px; border-top:1px solid var(--line); }.record-entry:first-child { border-top:0; }.record-entry-head { display:flex; justify-content:space-between; gap:15px; }.record-entry h3 { margin:0 0 8px; font-size:16px; }.record-entry p { margin:7px 0 0; color:#506562; line-height:1.5; }.record-entry .label { color:var(--primary); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.odontogram-panel { overflow-x:auto; padding:28px; }.odontogram-tools { min-width:980px; display:grid; grid-template-columns:1fr auto; gap:28px; padding-bottom:22px; border-bottom:1px solid var(--line); }.tool-label { display:block; margin-bottom:9px; color:var(--muted); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.tooth-legend,.scope-options { display:flex; flex-wrap:wrap; gap:8px; }.tooth-state,.scope-button { border:2px solid transparent; border-radius:22px; padding:9px 13px; background:#edf3f2; color:#425a57; font-size:13px; font-weight:700; }.tooth-state.active,.scope-button.active { border-color:#18302f; }.tooth-state.caries,.surface.caries { background:#e94d42; color:white; }.tooth-state.obturado,.surface.obturado { background:#3892d0; color:white; }.tooth-state.sellante,.surface.sellante { background:#27a985; color:white; }.tooth-state.ausente,.surface.ausente { background:#747e7c; color:white; }.tooth-state.corona,.surface.corona { background:#e9bb32; color:#4b3a00; }.tooth-state.endodoncia,.surface.endodoncia { background:#8b5fc3; color:white; }.tooth-state.implante,.surface.implante { background:#555f68; color:white; }.tooth-state.extraccion,.surface.extraccion { background:#f28a3a; color:white; }.surface-guide { min-width:980px; display:flex; gap:24px; margin:22px 0 30px; color:var(--muted); font-size:14px; }.surface-guide span { display:flex; align-items:center; gap:7px; }.surface-sample { width:16px; height:16px; display:inline-block; border:1px solid #9db0ad; background:white; }.surface-sample.center { border-radius:50%; }#odontogram-grid { min-width:1040px; padding:4px 0 10px; }.arch-label { text-align:center; color:var(--muted); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.tooth-row { display:flex; justify-content:center; gap:10px; margin:14px 0 34px; }.tooth-unit:nth-child(8) { margin-right:28px; }.tooth-unit { width:56px; text-align:center; }.tooth-number { display:block; margin-top:7px; color:#536966; font-size:13px; font-weight:800; }.tooth-diagram { position:relative; width:56px; height:56px; border:1px solid #aec1be; border-radius:14px; background:#f9fbfb; overflow:hidden; box-shadow:0 3px 8px #315b5518; }.surface { position:absolute; border:0; padding:0; background:white; }.surface:hover { filter:brightness(.9); }.surface.vestibular { inset:0 11px 36px; clip-path:polygon(0 0,100% 0,78% 100%,22% 100%); }.surface.lingual { inset:36px 11px 0; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }.surface.mesial { inset:11px 36px 11px 0; clip-path:polygon(0 0,100% 22%,100% 78%,0 100%); }.surface.distal { inset:11px 0 11px 36px; clip-path:polygon(0 22%,100% 0,100% 100%,0 78%); }.surface.oclusal { inset:15px; border:1px solid #bdcecb; border-radius:50%; z-index:2; }.tooth-diagram.whole-caries,.tooth-diagram.whole-obturado,.tooth-diagram.whole-sellante,.tooth-diagram.whole-ausente,.tooth-diagram.whole-corona,.tooth-diagram.whole-endodoncia,.tooth-diagram.whole-implante,.tooth-diagram.whole-extraccion { outline:4px solid currentColor; outline-offset:2px; }.tooth-diagram.whole-caries { color:#e94d42; }.tooth-diagram.whole-obturado { color:#3892d0; }.tooth-diagram.whole-sellante { color:#27a985; }.tooth-diagram.whole-ausente { color:#747e7c; opacity:.55; }.tooth-diagram.whole-corona { color:#e9bb32; }.tooth-diagram.whole-endodoncia { color:#8b5fc3; }.tooth-diagram.whole-implante { color:#555f68; }.tooth-diagram.whole-extraccion { color:#f28a3a; }
dialog { width:min(580px,calc(100% - 30px)); border:0; border-radius:16px; padding:0; box-shadow:0 24px 70px #102f2d55; } dialog::backdrop { background:#102f2d99; } dialog form { padding:25px; }.modal-heading,.modal-actions { display:flex; justify-content:space-between; align-items:center; }.modal-heading h2 { margin:0; }.close { border:0; background:transparent; font-size:19px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 8px; }.form-grid label { color:#3d5553; font-size:13px; font-weight:700; }.form-grid .full { grid-column:1/-1; }.form-grid input,.form-grid select,.form-grid textarea { display:block; width:100%; margin-top:7px; border:1px solid #cddbd9; border-radius:8px; padding:10px; outline-color:var(--primary); }.modal-actions { justify-content:flex-end; gap:10px; margin-top:20px; }.form-error { min-height:18px; margin:8px 0 0; color:var(--danger); font-size:13px; }
#toast { position:fixed; right:25px; bottom:25px; padding:12px 18px; background:#173f3b; color:white; border-radius:9px; transform:translateY(100px); opacity:0; transition:.25s; }#toast.show { transform:none; opacity:1; }
@media(max-width:760px) { .sidebar { position:static; width:100%; padding:16px; }.brand { padding-bottom:15px; } nav { display:flex; flex-wrap:wrap; }.nav-item { flex:1; text-align:center; }.local-badge { display:none; } main { margin:0; padding:25px 16px; }.stats { grid-template-columns:1fr; }.list-row { grid-template-columns:1fr auto; }.list-row>div:nth-child(2),.list-row>div:nth-child(3) { grid-column:1; }.date { display:none; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; }.color-options { grid-template-columns:repeat(2,1fr); } }