body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #111;
}


.layout {
  display: flex;
  min-height: 100vh;
}

body.menu-scroll-layout { height: 100vh; overflow: hidden; }
body.menu-scroll-layout .layout { height: 100vh; min-height: 0; overflow: hidden; }
body.menu-scroll-layout aside { width: 310px; height: 100vh; flex-basis: 310px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scrollbar-gutter: stable; }
body.menu-scroll-layout main { height: 100vh; min-width: 0; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scrollbar-gutter: stable; }
body.menu-scroll-layout aside::-webkit-scrollbar, body.menu-scroll-layout main::-webkit-scrollbar { width: 9px; }
body.menu-scroll-layout aside, body.menu-scroll-layout main { scrollbar-color: transparent transparent; }
body.menu-scroll-layout aside::-webkit-scrollbar-thumb, body.menu-scroll-layout main::-webkit-scrollbar-thumb { border-radius: 10px; background: transparent; }
body.menu-scroll-layout aside.is-scrolling { scrollbar-color: #555 transparent; }
body.menu-scroll-layout main.is-scrolling { scrollbar-color: #b7b7b7 transparent; }
body.menu-scroll-layout aside.is-scrolling::-webkit-scrollbar-thumb { border: 2px solid #111; background: #555; }
body.menu-scroll-layout main.is-scrolling::-webkit-scrollbar-thumb { border: 2px solid #f5f5f5; background: #b7b7b7; }

aside {
  flex: 0 0 260px;
  width: 260px;
  background: #111;
  color: white;
  padding: 25px;
  overflow: hidden;
  transition: width .38s cubic-bezier(.2,.8,.2,1), flex-basis .38s cubic-bezier(.2,.8,.2,1), padding .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

aside > * { transition: opacity .18s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
body.menu-collapsed aside { width: 0; flex-basis: 0; padding-right: 0; padding-left: 0; opacity: 0; }
body.menu-collapsed aside > * { opacity: 0; transform: translateX(-18px); pointer-events: none; }

.menu-toggle {
  position: fixed;
  top: 14px;
  left: 258px;
  z-index: 2400;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: #ffcc00;
  color: #111;
  box-shadow: 0 7px 20px rgba(0,0,0,.24);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: left .38s cubic-bezier(.2,.8,.2,1), transform .22s ease, box-shadow .22s ease;
}
.menu-toggle:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
body.menu-collapsed .menu-toggle { left: 12px; }

aside h2 {
  margin: 0;
  font-size: 32px;
  color: #ffcc00;
}

aside p {
  margin-bottom: 35px;
  color: #ddd;
}

aside button {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #1c1c1c;
  color: white;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
}

aside button:hover {
  background: #ffcc00;
  color: #111;
}

main {
  flex: 1;
  padding: 30px;
}

.hero {
  background: #111;
  color: white;
  padding: 35px;
  border-radius: 18px;
}

.hero h1 {
  margin-top: 0;
  font-size: 42px;
}

.hero p {
  color: #ddd;
}

.hero input {
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  box-sizing: border-box;
}

.cards {
  display: flex;
  gap: 20px;
  margin-top: 25px;
}

.card {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 16px;
  border-top: 6px solid #ffcc00;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.machine {
  margin-top: 25px;
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.machine h2 {
  margin-top: 0;
  font-size: 32px;
}

.machine span {
  display: inline-block;
  margin-bottom: 15px;
  padding: 8px 12px;
  background: #e8f8ed;
  border-radius: 20px;
}

.actions button {
  margin: 8px 8px 0 0;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: #ffcc00;
  font-weight: bold;
  cursor: pointer;
}

.cliente-card {
  background: #f9f9f9;
  border-left: 5px solid #ffcc00;
  padding: 18px;
  margin-bottom: 15px;
  border-radius: 12px;
}

.machine input {
  width: 100%;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.ficha-maquina-header { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.ficha-maquina-info { min-width: 0; }
.ficha-datos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.ficha-datos-grid p { min-width: 0; margin: 0; padding: 11px 0; border-bottom: 1px solid #e7e7e7; overflow-wrap: anywhere; }
.ficha-datos-grid b { display: block; margin-bottom: 4px; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: .25px; }
.ficha-img { width: 100%; height: 360px; object-fit: cover; border-radius: 14px; background: #f1f1f1; }
.ficha-img.maquina-img-vacia { display: flex; align-items: center; justify-content: center; color: #777; }

.calendar-link { padding: 10px 14px; border: 0; border-radius: 9px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.calendar-link.linked { background: #222; color: white; }
.work-status { margin: 0 !important; padding: 5px 9px !important; border-radius: 15px !important; font-size: 12px; font-weight: bold; }
.work-status.pending { background: #fff1c7 !important; color: #775000; }
.work-status.finished { background: #dff4e7 !important; color: #146232; }
.record-actions .work-state-button { background: #217346; color: white; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; }
.calendar-header h2 { margin: 0; text-transform: capitalize; }
.calendar-header button { border: 0; border-radius: 10px; background: #ffcc00; font-size: 28px; width: 48px; height: 44px; cursor: pointer; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; }
.calendar-weekday { text-align: center; padding: 10px; font-weight: bold; }
.calendar-view-control { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.calendar-view-control label { display: flex; align-items: center; gap: 9px; font-weight: bold; }
.calendar-view-control select { padding: 9px 12px; border: 1px solid #bbb; border-radius: 8px; background: white; font-size: 15px; }
.calendar-day { min-height: 260px; padding: 12px; border: 1px solid #ddd; border-radius: 9px; background: #fafafa; cursor: pointer; }
.calendar-grid.vista-quincena .calendar-day { min-height: 170px; }
.calendar-grid.vista-mes .calendar-day { min-height: 125px; padding: 8px; }
.calendar-grid.vista-mes .calendar-day-title strong { display: none; }
.calendar-day-title { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 2px solid #ffcc00; }
.calendar-empty { color: #999; font-size: 13px; }
.calendar-day.empty { background: #f1f1f1; cursor: default; }
.calendar-event { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; padding: 5px 7px; border-radius: 6px; font-size: 12px; overflow: hidden; }
.calendar-event span { overflow: hidden; text-overflow: ellipsis; }
.calendar-event-content { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.calendar-event-content strong { margin-bottom: 2px; }
.calendar-event-content small { margin-top: 3px; color: #555; white-space: normal; }
.calendar-event.mantenimiento { background: #dff4e7; }
.calendar-event.reparacion { background: #ffe4dc; }
.calendar-event.nota { background: #fff0a8; }
.calendar-event button { padding: 0; border: 0; background: transparent; font-size: 17px; cursor: pointer; }

.account-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.account-balance { min-width: 180px; padding: 14px 18px; border-radius: 12px; background: #111; color: white; text-align: right; }
.account-balance small, .account-balance strong { display: block; }
.account-balance strong { margin-top: 5px; color: #ffcc00; font-size: 23px; }
.spreadsheet-form { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 8px; margin: 22px 0 14px; }
.spreadsheet-form input { margin: 0; border-radius: 3px; }
.spreadsheet-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 6px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.spreadsheet-wrap { overflow-x: auto; border: 1px solid #aaa; }
.spreadsheet { width: 100%; min-width: 900px; border-collapse: collapse; background: white; }
.spreadsheet th, .spreadsheet td { padding: 10px; border: 1px solid #c8c8c8; text-align: left; }
.spreadsheet th { position: sticky; top: 0; background: #217346; color: white; }
.spreadsheet tbody tr:nth-child(even) { background: #f3f8f5; }
.spreadsheet .money { text-align: right; white-space: nowrap; }
.spreadsheet .debit { color: #a12424; }
.spreadsheet .credit { color: #16703a; }
.spreadsheet .balance { font-weight: bold; }
.delete-row { border: 0; background: transparent; color: #a12424; font-size: 21px; cursor: pointer; }
.edit-row { border: 0; background: transparent; color: #17683a; font-size: 18px; cursor: pointer; }
.record-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.record-actions button { padding: 9px 12px; border: 0; border-radius: 7px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.record-actions button.danger, .actions button.danger { background: #a12424; color: white; }
.calendar-event-actions { display: flex; flex-direction: column; }
.editor-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.62); }
.editor-card { width: min(620px, 100%); max-height: 90vh; overflow-y: auto; padding: 24px; border-radius: 16px; background: white; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.editor-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }
.editor-title h2 { margin: 0; }
.editor-title button { border: 0; background: transparent; font-size: 30px; cursor: pointer; }
.editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-fields label { display: flex; flex-direction: column; gap: 5px; font-weight: bold; }
.editor-fields input { padding: 11px; border: 1px solid #bbb; border-radius: 7px; font: inherit; font-weight: normal; }
.editor-actions { display: flex; gap: 9px; margin-top: 20px; }
.editor-actions button { padding: 11px 15px; border: 0; border-radius: 7px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.editor-actions button:last-child { background: #ddd; }
.empty-table { padding: 25px !important; color: #777; text-align: center !important; }
.budget-summary { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; margin-top: 25px; }
.summary-card { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px; border-radius: 14px; background: white; border-left: 7px solid #ffcc00; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.summary-card.general { background: #111; color: white; }
.summary-card small { font-size: 15px; }
.summary-card strong { font-size: 32px; color: #d98200; }
.summary-card.general strong { color: #ffcc00; }
.budget-form { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 8px; margin: 22px 0 14px; }
.budget-form input, .budget-form select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 5px; box-sizing: border-box; font: inherit; }
.budget-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 6px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.budget-table { min-width: 1250px; }
.pending-row { background: #fff9df !important; }
.accepted-row { background: #edf8f1 !important; }
.pending-label, .accepted-label { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.pending-label { background: #fff0a8; color: #785600; }
.accepted-label { background: #dff4e7; color: #146232; }
.oc-cell { display: flex; gap: 5px; min-width: 220px; }
.oc-cell input { min-width: 110px; padding: 7px; border: 1px solid #bbb; }
.oc-cell button { padding: 7px 9px; border: 0; border-radius: 5px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.pdf-picker { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px; border: 1px solid #ccc; background: white; font-size: 12px; }
.pdf-picker input { padding: 0; border: 0; }
.pdf-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 150px; }
.pdf-cell a { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: #17683a; font-weight: bold; white-space: nowrap; }
.pdf-upload { padding: 5px 8px; border-radius: 5px; background: #ffcc00; font-size: 12px; font-weight: bold; cursor: pointer; }
.pdf-upload input { display: none; }
.pdf-remove { margin-left: 5px; border: 0; background: transparent; color: #a12424; font-size: 18px; cursor: pointer; }
.pdf-builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pdf-builder-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; }
.pdf-builder-grid label.wide { grid-column: 1 / -1; }
.pdf-builder-grid input, .pdf-builder-grid textarea, .pdf-builder-grid select { margin: 0; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-weight: normal; resize: vertical; }
.budget-machine-reference { grid-column: 1 / -1; padding: 13px 15px; border: 1px dashed #bbb; border-radius: 8px; background: #fafafa; color: #666; }
.budget-machine-reference.selected { border-style: solid; border-color: #217346; background: #edf8f1; color: #164f31; font-weight: bold; }
.budget-machine-select { width: 230px; padding: 7px; border: 1px solid #bbb; border-radius: 6px; background: white; }
.linked-budget-machine, .budget-work-state { display: block !important; max-width: 250px; margin: 6px 0 0 !important; padding: 0 !important; background: transparent !important; color: #555; font-size: 11px; line-height: 1.35; white-space: normal; }
.budget-work-state { color: #17683a; font-weight: bold; }
.budget-work-state.warning { color: #8a5a00; }
.technical-history-form { display: grid; grid-template-columns: 140px 170px minmax(220px, 1fr) 180px 180px; gap: 8px; margin: 20px 0 14px; align-items: stretch; }
.technical-history-form input, .technical-history-form select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 4px; box-sizing: border-box; }
.technical-history-form label { display: flex; flex-direction: column; gap: 4px; padding: 5px 8px; border: 1px solid #bbb; background: white; font-size: 12px; }
.technical-history-form label input { padding: 2px 0; border: 0; }
.technical-history-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 6px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.technical-history-table { min-width: 900px; }
.history-file { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; color: #17683a; font-weight: bold; white-space: nowrap; }
.portal-client-card { margin-bottom: 14px; border: 1px solid #ddd; border-left: 6px solid #ffcc00; border-radius: 12px; background: white; overflow: hidden; }
.portal-client-card summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 18px; cursor: pointer; }
.portal-client-card summary span:first-child { display: flex; flex-direction: column; gap: 5px; }
.portal-client-card summary strong { font-size: 20px; }
.portal-client-card summary small { color: #666; }
.portal-counts { white-space: nowrap; font-weight: bold; }
.portal-client-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 18px 18px; border-top: 1px solid #eee; }
.portal-client-content section { padding-top: 14px; }
.portal-client-content h4 { margin: 0 0 10px; font-size: 18px; }
.portal-client-content p { margin: 6px 0; }
.portal-item { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 9px; border-radius: 7px; background: #f7f7f7; }
.portal-item span { color: #555; font-size: 13px; }
.today-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #ddd; }
.today-header small { color: #666; text-transform: uppercase; letter-spacing: 1px; }
.today-header h2 { margin: 4px 0 0; text-transform: capitalize; }
.today-header > button { padding: 11px 15px; border: 0; border-radius: 8px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.today-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.today-header-actions button { padding: 11px 15px; border: 0; border-radius: 8px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.today-header-actions button:last-child { background: #111; color: white; }
.quick-agenda-form { margin: 16px 0; padding: 16px; border: 1px solid #e1c644; border-radius: 10px; background: #fff9dc; }
.quick-agenda-form[hidden] { display: none; }
.quick-agenda-form input { width: 100%; margin-bottom: 8px; padding: 11px; border: 1px solid #ccc; border-radius: 7px; box-sizing: border-box; }
.today-count { margin: 18px 0 10px; font-weight: bold; color: #555; }
.today-list { display: grid; gap: 10px; }
.today-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; padding: 16px; border-left: 6px solid #aaa; border-radius: 10px; background: #f8f8f8; }
.today-item.mantenimiento { border-color: #3b9d61; background: #eff9f3; }
.today-item.reparacion { border-color: #d56a48; background: #fff3ef; }
.today-item.nota { border-color: #d9ad00; background: #fff9df; }
.today-icon { font-size: 25px; }
.today-item h3 { margin: 0 0 7px; }
.today-item p { margin: 4px 0; }
.today-empty { margin-top: 18px; padding: 25px; border: 2px dashed #ccc; border-radius: 12px; text-align: center; color: #666; }
.accounting-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 25px; padding: 16px; border-radius: 12px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.accounting-toolbar label { display: flex; flex: 1; min-width: 190px; flex-direction: column; gap: 5px; font-weight: bold; }
.accounting-toolbar input { padding: 10px; border: 1px solid #bbb; border-radius: 7px; }
.accounting-toolbar button { padding: 11px 15px; border: 0; border-radius: 7px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.accounting-cards { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.accounting-cards > div { padding: 18px; border-top: 5px solid #217346; border-radius: 12px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.accounting-cards small, .accounting-cards strong { display: block; }
.accounting-cards small { min-height: 34px; color: #666; }
.accounting-cards strong { margin-top: 8px; font-size: 21px; }
.accounting-cards .positive { color: #16703a; }
.accounting-cards .negative { color: #a12424; }
.accounting-form { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 11px; }
.accounting-form label { display: flex; flex-direction: column; gap: 5px; font-weight: bold; }
.accounting-form label.wide { grid-column: 1 / -1; }
.accounting-form input, .accounting-form select { padding: 10px; border: 1px solid #bbb; border-radius: 7px; font: inherit; font-weight: normal; }
.accounting-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.accounting-summary-row { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #e5e5e5; }
.accounting-table { min-width: 1150px; }
.movement-type { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; text-transform: capitalize; }
.movement-type.ingreso { background: #dff4e7; color: #146232; }
.movement-type.egreso { background: #ffe4dc; color: #8b321b; }
.accounting-table .money.ingreso { color: #16703a; font-weight: bold; }
.accounting-table .money.egreso { color: #a12424; font-weight: bold; }
.linked-movement { background: #eef7ff !important; }
.linked-label { display: block; margin-top: 3px; color: #27619b; font-size: 10px; font-weight: bold; }
.view-row { padding: 6px 9px; border: 0; border-radius: 5px; background: #27619b; color: white; font-weight: bold; cursor: pointer; }
.estimated-date { display: block; color: #777; font-size: 10px; }
.overdue-card { border-top-color: #b42318 !important; }
.overdue-card strong { color: #b42318; }
.overdue-panel { border-left: 7px solid #b42318; }
.overdue-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid #ead0cd; }
.overdue-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.overdue-row span { color: #a12424; }
.overdue-row small { color: #666; }
.overdue-row > b { color: #b42318; font-size: 18px; }
.overdue-row button { margin: 3px; padding: 7px 9px; border: 0; border-radius: 6px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.no-overdue { padding: 18px; border-radius: 9px; background: #e8f8ed; color: #146232; font-weight: bold; text-align: center; }
.analysis-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.analysis-panel-heading h2 { margin: 0; }
.analysis-panel-heading a { flex: 0 0 auto; padding: 8px 12px; border-radius: 7px; background: #217346; color: white; font-size: 13px; font-weight: bold; text-decoration: none; }
.analysis-panel-heading a:hover { background: #175a37; }
.analysis-hero .back-link { display: inline-block; margin-bottom: 15px; color: #fff; font-weight: bold; text-decoration: none; }
.analysis-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 20px 0 0; padding: 5px 0; }
.analysis-tabs a { flex: 0 0 auto; padding: 11px 14px; border: 1px solid #d4d4d4; border-radius: 9px; background: white; color: #333; font-weight: bold; text-decoration: none; }
.analysis-tabs a.active { border-color: #217346; background: #217346; color: white; }
.analysis-toolbar select { padding: 10px; border: 1px solid #bbb; border-radius: 7px; font: inherit; }
.analysis-toolbar label[hidden] { display: none; }
.analysis-metrics { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; }
.analysis-metrics > div { padding: 18px; border-left: 5px solid #ffcc00; border-radius: 11px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.analysis-metrics small, .analysis-metrics strong { display: block; }
.analysis-metrics small { min-height: 34px; color: #666; }
.analysis-metrics strong { margin-top: 6px; font-size: 20px; }
.analysis-metrics .positive, .analysis-table .positive { color: #16703a; }
.analysis-metrics .negative, .analysis-table .negative { color: #b42318; }
.analysis-table td small { display: block; margin-top: 4px; color: #707070; }
.analysis-table.compact { min-width: 720px; }
.economic-note { display: flex; gap: 14px; margin-top: 18px; padding: 14px 18px; border-left: 5px solid #27619b; border-radius: 9px; background: #eef7ff; }
.economic-note span { color: #4f5f70; }
.accounting-toolbar select { padding: 10px; border: 1px solid #bbb; border-radius: 7px; font: inherit; }
.economic-kpis { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 12px; margin: 18px 0; }
.economic-kpis > div { padding: 18px; border-top: 5px solid #ffcc00; border-radius: 12px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.economic-kpis small, .economic-kpis strong { display: block; }
.economic-kpis small { min-height: 34px; color: #666; }
.economic-kpis strong { margin-top: 7px; font-size: 21px; }
.economic-kpis .positive, .projection-grid .positive { color: #16703a; }
.economic-kpis .negative, .projection-grid .negative { color: #b42318; }
.economic-kpis .warning { color: #a56300; }
.economic-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.economic-heading h2, .economic-heading p { margin-top: 0; }
.economic-status { padding: 9px 13px; border-radius: 18px; background: #eee; font-size: 13px; font-weight: bold; white-space: nowrap; }
.economic-status.positive { background: #dff4e7; color: #146232; }
.economic-status.negative { background: #ffe4dc; color: #8b321b; }
.economic-status.warning { background: #fff1c7; color: #775000; }
.diagnosis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diagnosis-grid article { padding: 16px; border: 1px solid #e4e4e4; border-radius: 10px; background: #fafafa; }
.diagnosis-grid h3 { margin: 0 0 8px; font-size: 16px; }
.diagnosis-grid p { margin: 0; color: #555; line-height: 1.45; }
.economic-chart { display: flex; align-items: stretch; gap: 8px; height: 260px; margin: 22px 0; padding: 18px 14px 4px; overflow-x: auto; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.economic-month { display: flex; flex: 1 0 54px; min-width: 54px; flex-direction: column; justify-content: flex-end; text-align: center; }
.economic-bars { display: flex; height: 215px; align-items: flex-end; justify-content: center; gap: 4px; }
.economic-bars i { display: block; width: 17px; min-height: 0; border-radius: 4px 4px 0 0; }
.economic-bars .income, .share-track .income { background: #217346; }
.economic-bars .expense, .share-track .expense { background: #c64b35; }
.economic-month span { padding-top: 6px; color: #666; font-size: 11px; white-space: nowrap; }
.economic-table { min-width: 900px; }
.economic-table .positive { color: #16703a; }
.economic-table .negative { color: #b42318; }
.economic-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.economic-share { margin: 14px 0; }
.economic-share > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.economic-share b { font-size: 13px; }
.share-track { height: 9px; overflow: hidden; border-radius: 8px; background: #e8e8e8; }
.share-track i { display: block; height: 100%; border-radius: 8px; background: #ffcc00; }
.projection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.projection-grid > div { padding: 14px; border-radius: 8px; background: #f6f6f6; }
.projection-grid small, .projection-grid strong { display: block; }
.projection-grid strong { margin-top: 5px; }
.indicator-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #e5e5e5; }
.empty-analysis { padding: 20px; border: 2px dashed #ddd; border-radius: 9px; color: #777; text-align: center; }
.break-even-form { display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)) 1.2fr; gap: 12px; align-items: stretch; }
.break-even-form label { display: flex; flex-direction: column; gap: 7px; font-weight: bold; }
.break-even-form input { padding: 11px; border: 1px solid #bbb; border-radius: 7px; font: inherit; font-weight: normal; }
.break-even-result { display: flex; flex-direction: column; justify-content: center; padding: 15px; border-radius: 10px; background: #217346; color: white; }
.break-even-result strong { margin: 5px 0; font-size: 22px; }
.break-even-result span { font-size: 12px; opacity: .9; }
.fleet-summary { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; margin: 20px 0; }
.fleet-summary > div { padding: 17px; border-top: 5px solid #333; border-radius: 11px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.fleet-summary > div.available { border-top-color: #217346; }
.fleet-summary > div.repair { border-top-color: #c64b35; }
.fleet-summary > div.rented { border-top-color: #27619b; }
.fleet-summary small, .fleet-summary strong { display: block; }
.fleet-summary small { color: #666; }
.fleet-summary strong { margin-top: 7px; font-size: 24px; }
.fleet-form { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 11px; }
.fleet-form label, .rental-fields label, .fleet-maintenance-form label { display: flex; flex-direction: column; gap: 5px; font-weight: bold; }
.fleet-form label.wide { grid-column: 1 / -1; }
.fleet-form input, .fleet-form select, .rental-fields input, .fleet-maintenance-form input, .fleet-maintenance-form select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; }
.rental-fields { margin: 16px 0; padding: 17px; border-left: 5px solid #27619b; border-radius: 9px; background: #eef7ff; }
.rental-fields[hidden] { display: none; }
.rental-fields h3 { margin-top: 0; }
.rental-fields > div { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 11px; }
.fleet-grid { display: grid; grid-template-columns: repeat(2,minmax(280px,1fr)); gap: 18px; }
.fleet-card { overflow: hidden; border: 1px solid #e2e2e2; border-radius: 14px; background: #fafafa; }
.fleet-card-image { position: relative; height: 230px; background: #ececec; }
.fleet-card-image img { width: 100%; height: 100%; object-fit: cover; }
.fleet-card-image > div { display: flex; height: 100%; align-items: center; justify-content: center; color: #777; }
.fleet-status { display: inline-block; margin: 0 !important; padding: 7px 11px !important; border-radius: 18px !important; font-size: 12px; font-weight: bold; }
.fleet-card-image .fleet-status { position: absolute; top: 12px; right: 12px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.fleet-status.available { background: #dff4e7 !important; color: #146232; }
.fleet-status.repair { background: #ffe4dc !important; color: #8b321b; }
.fleet-status.rented { background: #dfeeff !important; color: #20588e; }
.fleet-card-info { padding: 18px; }
.fleet-card-info h3 { margin: 0 0 12px; font-size: 24px; }
.fleet-card-info p { margin: 7px 0; }
.rental-summary { margin-top: 13px; padding: 12px; border-radius: 8px; background: #eef7ff; line-height: 1.5; }
.fleet-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fleet-title-row h2 { margin: 0; }
.fleet-rental-panel { margin-top: 20px; padding: 17px; border-left: 5px solid #27619b; border-radius: 9px; background: #eef7ff; }
.fleet-rental-panel h3 { margin-top: 0; }
.remove-fleet-image { width: 100%; margin-top: 7px; padding: 8px; border: 0; border-radius: 7px; background: #eee; color: #8b321b; cursor: pointer; }
.fleet-maintenance-form { display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)); gap: 9px; align-items: end; }
.fleet-maintenance-form label.wide { grid-column: 1 / -1; }
.fleet-maintenance-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 7px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.fleet-maintenance-table { min-width: 1050px; }
.settings-message { position: sticky; top: 12px; z-index: 20; margin-top: 18px; padding: 13px 16px; border-radius: 9px; background: #dff4e7; color: #146232; font-weight: bold; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.settings-form { display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: 12px; }
.settings-form label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; }
.settings-form label.wide { grid-column: 1 / -1; }
.settings-form input { width: 100%; margin: 0; padding: 11px; border: 1px solid #bbb; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; }
.settings-actions { display: flex; gap: 10px; }
.settings-actions button, .backup-actions button, .restore-backup { padding: 12px 16px; border: 0; border-radius: 8px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.settings-actions .secondary { background: #ddd; color: #333; }
.backup-panel { border-left: 7px solid #27619b; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.restore-backup { display: inline-flex; align-items: center; background: #27619b; }
.restore-backup input { display: none; }
.backup-panel > small { color: #666; }
.library-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 25px; }
.library-sections button { display: flex; min-height: 260px; padding: 30px; border: 1px solid #ddd; border-top: 7px solid #ffcc00; border-radius: 16px; background: white; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.library-sections button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.library-sections span { font-size: 48px; }
.library-sections strong { margin-top: 18px; font-size: 28px; }
.library-sections small { margin-top: 9px; color: #666; font-size: 15px; }
.library-sections b { margin-top: auto; color: #17683a; }
.manual-warning { margin-top: 20px; padding: 18px; border-left: 6px solid #d98200; border-radius: 9px; background: #fff8df; }
.manual-warning p { margin-bottom: 0; }
.manual-digital-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
.manual-digital-summary > div { padding: 18px; border-top: 5px solid #c62828; border-radius: 11px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.manual-digital-summary small, .manual-digital-summary strong { display: block; }
.manual-digital-summary small { color: #666; }
.manual-digital-summary strong { margin-top: 7px; font-size: 22px; }
.parts-form { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 10px; }
.parts-form label, .parts-toolbar label { display: flex; flex-direction: column; gap: 5px; font-weight: bold; }
.parts-form label.wide { grid-column: 1 / -1; }
.parts-form input, .parts-form select, .parts-toolbar select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; }
.parts-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 7px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.parts-toolbar { display: flex; align-items: end; gap: 10px; margin-top: 20px; padding: 14px; border-radius: 10px; background: white; box-shadow: 0 7px 18px rgba(0,0,0,.07); }
.parts-toolbar label { flex: 1; }
.parts-toolbar button { padding: 11px 14px; border: 0; border-radius: 7px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.parts-table { min-width: 1250px; }
.login-page { min-height: 100vh; background: #111; }
.login-shell { display: grid; width: min(1040px,calc(100% - 32px)); min-height: 620px; margin: 5vh auto; padding: 0; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-radius: 24px; background: white; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.login-brand { display: flex; padding: 55px; background: linear-gradient(145deg,#111,#292929); color: white; flex-direction: column; justify-content: center; }
.login-logo { display: flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 19px; background: #ffcc00; color: #111; font-size: 30px; font-weight: 900; }
.login-brand h1 { margin: 24px 0 8px; color: #ffcc00; font-size: 48px; }
.login-brand > p { max-width: 380px; color: #ddd; font-size: 20px; line-height: 1.45; }
.login-brand-note { margin-top: 45px; padding-top: 18px; border-top: 1px solid #555; color: #aaa; }
.login-card { padding: 48px; align-self: center; }
.login-card h2 { margin: 0 0 8px; font-size: 32px; }
.login-card > p { margin-top: 0; color: #666; }
.login-role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 24px 0; padding: 5px; border-radius: 10px; background: #eee; }
.login-role-tabs button { padding: 11px 8px; border: 0; border-radius: 7px; background: transparent; font-weight: bold; cursor: pointer; }
.login-role-tabs button.active { background: white; color: #17683a; box-shadow: 0 3px 9px rgba(0,0,0,.1); }
.login-card label { display: flex; margin: 13px 0; flex-direction: column; gap: 6px; font-weight: bold; }
.login-card input { padding: 13px; border: 1px solid #bbb; border-radius: 8px; font: inherit; font-weight: normal; }
.login-submit { width: 100%; margin-top: 10px; padding: 14px; border: 0; border-radius: 9px; background: #217346; color: white; font-size: 15px; font-weight: bold; cursor: pointer; }
.login-submit.client { background: #27619b; }
.login-message { margin-bottom: 15px; padding: 11px; border-radius: 7px; font-size: 13px; font-weight: bold; }
.login-message.error { background: #ffe4dc; color: #8b321b; }
.login-message.success { background: #dff4e7; color: #146232; }
.first-access-note { display: flex; margin-bottom: 16px; padding: 13px; border-left: 5px solid #ffcc00; border-radius: 7px; background: #fff8dc; flex-direction: column; gap: 4px; }
.client-access-help { display: block; margin-top: 15px; color: #777; text-align: center; }
.session-user { margin: 22px 0 12px; padding: 12px; border: 1px solid #333; border-radius: 9px; background: #191919; }
.session-user small, .session-user strong { display: block; }
.session-user small { color: #999; }
.session-user strong { margin-top: 3px; color: #ffcc00; overflow-wrap: anywhere; }
aside .logout-button { border-color: #5d2d2d; color: #ffb5aa; }
.company-user-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 9px; }
.company-user-form input { margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 7px; font: inherit; }
.company-user-form button, .access-row button, .client-access-card button { padding: 9px 12px; border: 0; border-radius: 7px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.access-list { margin-top: 16px; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #e5e5e5; }
.access-row strong, .access-row small { display: block; }
.access-row small { margin-top: 4px; color: #666; }
.access-row .danger, .client-access-card .danger { background: #a12424; }
.client-access-list { display: grid; gap: 11px; }
.client-access-card { position: relative; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: end; padding: 16px; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; }
.client-access-card > div:first-child { align-self: center; }
.client-access-card strong, .client-access-card small { display: block; }
.client-access-card small { margin-top: 4px; color: #666; }
.client-access-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: bold; }
.client-access-card input { padding: 9px; border: 1px solid #bbb; border-radius: 6px; }
.access-status { position: absolute; top: 7px; right: 8px; padding: 3px 7px; border-radius: 10px; background: #eee; color: #666; font-size: 10px; font-weight: bold; }
.access-status.active { background: #dff4e7; color: #146232; }
.password-field { position: relative; display: flex; width: 100%; align-items: center; }
.password-field input { width: 100%; padding-right: 48px !important; box-sizing: border-box; }
.password-toggle { position: absolute; right: 6px; width: 36px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #333 !important; font-size: 17px; cursor: pointer; }
.password-toggle:hover { background: #eee !important; }
.readonly-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.readonly-heading h2 { margin: 0; }
.readonly-heading span { margin: 0 !important; padding: 6px 10px !important; background: #eef0f3 !important; color: #555; font-size: 12px; font-weight: bold; }
.readonly-client-grid, .readonly-tech-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
.readonly-client-grid p, .readonly-tech-grid p { display: flex; margin: 0; padding: 11px 0; border-bottom: 1px solid #e7e7e7; flex-direction: column; gap: 4px; }
.readonly-client-grid p.wide { grid-column: 1 / -1; }
.readonly-client-grid b, .readonly-tech-grid b { color: #666; font-size: 11px; text-transform: uppercase; }
.readonly-machines { display: grid; gap: 16px; }
.readonly-machine { overflow: hidden; border: 1px solid #ddd; border-left: 7px solid #ffcc00; border-radius: 12px; background: #fafafa; }
.readonly-machine-main { display: grid; grid-template-columns: 1fr 220px; gap: 18px; padding: 18px; }
.readonly-machine-main h3 { margin-top: 0; font-size: 25px; }
.readonly-machine-main img, .readonly-no-image { width: 220px; height: 190px; object-fit: cover; border-radius: 10px; background: #eee; }
.readonly-no-image { display: flex; align-items: center; justify-content: center; color: #777; }
.readonly-machine details { border-top: 1px solid #ddd; }
.readonly-machine summary { padding: 13px 18px; background: #f1f1f1; font-weight: bold; cursor: pointer; }
.readonly-machine details > .readonly-tech-grid { padding: 10px 18px 18px; }
.readonly-machine .spreadsheet-wrap { margin: 0 18px 18px; }
.readonly-history-table { min-width: 760px; }
.readonly-budget-table, .readonly-account-table { min-width: 800px; }
.payment-upload-panel { border-left: 7px solid #27619b; }
.payment-upload-form { display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)); gap: 10px; }
.payment-upload-form label { display: flex; flex-direction: column; gap: 5px; font-weight: bold; }
.payment-upload-form label.wide { grid-column: 1 / -1; }
.payment-upload-form input, .payment-upload-form select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; }
.payment-upload-form label.file { padding: 10px; border: 1px dashed #aaa; border-radius: 8px; background: #fafafa; }
.payment-upload-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 7px; background: #27619b; color: white; font-weight: bold; cursor: pointer; }
.payment-proof-row { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; padding: 14px 0; border-bottom: 1px solid #ddd; }
.payment-proof-row.readonly { grid-template-columns: 1fr auto; }
.payment-proof-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.payment-proof-row > div:first-child span { margin: 0; padding: 0; background: transparent; color: #555; }
.payment-proof-row small { color: #777; }
.payment-proof-row button { margin: 3px; padding: 8px 10px; border: 0; border-radius: 6px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.payment-proof-row button.danger { background: #a12424; }
.payment-proof-row button.reject { background: #b56a16; }
.payment-proof-row button.revert { background: #555; }
.payment-file { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: #17683a; font-weight: bold; white-space: nowrap; }
.proof-status { display: block !important; margin: 6px 0 0 !important; padding: 5px 8px !important; border-radius: 12px !important; background: #fff1c7 !important; color: #775000; font-size: 11px; font-weight: bold; text-align: center; }
.proof-status.reviewed { background: #dff4e7 !important; color: #146232; }
.proof-status.accepted { background: #dff4e7 !important; color: #146232; }
.proof-status.rejected { background: #ffe4dc !important; color: #8b321b; }
.vademecum-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
.vademecum-summary > div { padding: 18px; border-top: 5px solid #217346; border-radius: 11px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.vademecum-summary small, .vademecum-summary strong { display: block; }
.vademecum-summary small { color: #666; }
.vademecum-summary strong { margin-top: 7px; font-size: 23px; }
.vademecum-form { display: grid; grid-template-columns: repeat(3,minmax(170px,1fr)); gap: 11px; }
.vademecum-form label, .vademecum-toolbar label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; }
.vademecum-form label.wide { grid-column: 1 / -1; }
.vademecum-form input, .vademecum-form select, .vademecum-form textarea, .vademecum-toolbar select { width: 100%; margin: 0; padding: 10px; border: 1px solid #bbb; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; }
.vademecum-form button { grid-column: 1 / -1; padding: 12px; border: 0; border-radius: 7px; background: #ffcc00; font-weight: bold; cursor: pointer; }
.vademecum-toolbar { display: flex; justify-content: flex-end; margin-top: 20px; }
.vademecum-toolbar label { min-width: 260px; }
.vademecum-grid { display: grid; grid-template-columns: repeat(2,minmax(260px,1fr)); gap: 15px; }
.vademecum-card { padding: 18px; border: 1px solid #ddd; border-left: 6px solid #ffcc00; border-radius: 11px; background: #fafafa; }
.vademecum-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vademecum-card-head > span { margin: 0 !important; padding: 5px 8px !important; background: #eee !important; font-size: 11px; font-weight: bold; }
.vademecum-card-head small { padding: 4px 7px; border-radius: 12px; font-weight: bold; }
.vademecum-card-head .verified { background: #dff4e7; color: #146232; }
.vademecum-card-head .custom { background: #eef0f3; color: #555; }
.vademecum-card h3 { margin-bottom: 7px; }
.vademecum-card > b { color: #555; font-size: 13px; }
.vademecum-card p { line-height: 1.5; }
.vademecum-source { min-height: 22px; font-size: 12px; }
.vademecum-source a { color: #17683a; font-weight: bold; }

@media (max-width: 800px) {
  body.menu-scroll-layout { height: auto; overflow: auto; }
  body.menu-scroll-layout .layout { height: auto; min-height: 100vh; overflow: visible; }
  body.menu-scroll-layout aside, body.menu-scroll-layout main { width: auto; height: auto; flex-basis: auto; overflow: visible; scrollbar-gutter: auto; }
  .layout { display: block; }
  aside { width: auto; padding: 58px 16px 16px; }
  body.menu-collapsed aside { width: auto; max-height: 0; padding: 0; }
  .menu-toggle { top: 10px; right: 10px; left: auto; }
  body.menu-collapsed .menu-toggle { right: auto; left: 10px; }
  aside p { margin-bottom: 15px; }
  main { padding: 14px; }
  .hero { padding: 24px; }
  .hero h1 { font-size: 32px; }
  .calendar-panel { overflow-x: auto; }
  .calendar-grid { min-width: 1100px; }
  .account-heading { display: block; }
  .account-balance { margin-top: 15px; text-align: left; }
  .spreadsheet-form { grid-template-columns: 1fr; }
  .budget-summary, .budget-form { grid-template-columns: 1fr; }
  .pdf-builder-grid { grid-template-columns: 1fr; }
  .pdf-builder-grid label.wide { grid-column: auto; }
  .technical-history-form { grid-template-columns: 1fr; }
  .technical-history-form button { grid-column: auto; }
  .portal-client-content { grid-template-columns: 1fr; }
  .portal-client-card summary { align-items: flex-start; flex-direction: column; }
  .today-header { align-items: flex-start; flex-direction: column; }
  .today-item { grid-template-columns: 36px 1fr; }
  .today-item .record-actions { grid-column: 1 / -1; }
  .editor-fields { grid-template-columns: 1fr; }
  .accounting-cards { grid-template-columns: 1fr 1fr; }
  .accounting-form, .accounting-columns { grid-template-columns: 1fr; }
  .overdue-row { grid-template-columns: 1fr; }
  .accounting-form label.wide { grid-column: auto; }
  .analysis-metrics { grid-template-columns: 1fr 1fr; }
  .analysis-panel-heading { align-items: flex-start; }
  .economic-kpis { grid-template-columns: 1fr 1fr; }
  .economic-columns, .diagnosis-grid, .break-even-form { grid-template-columns: 1fr; }
  .economic-note, .economic-heading { flex-direction: column; }
  .ficha-maquina-header, .ficha-datos-grid { grid-template-columns: 1fr; }
  .ficha-img { height: 300px; }
  .fleet-summary, .fleet-form, .rental-fields > div, .fleet-grid, .fleet-maintenance-form { grid-template-columns: 1fr; }
  .fleet-form label.wide, .fleet-maintenance-form button { grid-column: auto; }
  .fleet-title-row { align-items: flex-start; flex-direction: column; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-form label.wide { grid-column: auto; }
  .settings-actions { align-items: stretch; flex-direction: column; }
  .library-sections, .manual-digital-summary, .parts-form, .vademecum-summary, .vademecum-form, .vademecum-grid { grid-template-columns: 1fr; }
  .parts-form label.wide, .parts-form button { grid-column: auto; }
  .parts-toolbar { align-items: stretch; flex-direction: column; }
  .login-shell { grid-template-columns: 1fr; margin: 16px auto; }
  .login-brand { padding: 32px; }
  .login-brand-note { display: none; }
  .login-card { padding: 30px; }
  .company-user-form, .client-access-card { grid-template-columns: 1fr; }
  .access-row { align-items: flex-start; flex-direction: column; }
  .readonly-client-grid, .readonly-tech-grid, .readonly-machine-main, .payment-upload-form, .payment-proof-row, .payment-proof-row.readonly { grid-template-columns: 1fr; }
  .readonly-client-grid p.wide, .payment-upload-form label.wide, .payment-upload-form button { grid-column: auto; }
  .readonly-machine-main img, .readonly-no-image { width: 100%; }
  .vademecum-form label.wide, .vademecum-form button { grid-column: auto; }
}

@media (max-width: 480px) {
  .analysis-metrics { grid-template-columns: 1fr; }
  .economic-kpis, .projection-grid { grid-template-columns: 1fr; }
}

/* TARJETAS DE MÁQUINAS */

.maquinas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.maquina-card {
  background: white;
  border: 1px solid #e5e5e5;
  border-left: 8px solid #ffcc00;
  padding: 28px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
  align-items: center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.maquina-card h3 {
  margin-top: 0;
  font-size: 30px;
}

.maquina-card p {
  font-size: 17px;
  margin: 10px 0;
}

.maquina-card button {
  margin-top: 22px;
  padding: 14px 22px;
  border: none;
  border-radius: 10px;
  background: #ffcc00;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}

.maquina-img {
  width: 260px;
  height: 340px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  background: #f1f1f1;
}

/* CENTRO DE NOTIFICACIONES */
.notification-center { --bell-tilt: 20deg; position: fixed; top: 18px; right: 22px; z-index: 2500; font-family: inherit; }
.notification-bell { position: relative; width: 52px; height: 52px; padding: 0; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: #1f2933; color: white; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 23px; cursor: grab; touch-action: none; user-select: none; }
.notification-bell:hover { transform: translateY(-1px); background: #111820; }
.notification-center.snapping { transition: left .38s cubic-bezier(.18,.82,.28,1), top .38s cubic-bezier(.18,.82,.28,1); }
.notification-center.dragging .notification-bell { background: #111820; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: bell-pushed .18s ease-in-out infinite alternate; }
.notification-center.bell-drop .notification-bell { animation: bell-fall .4s cubic-bezier(.2,.8,.25,1); }
.notification-center[data-lado="izquierda"] .notification-bell span { right: -7px; }
@keyframes bell-pushed { from { transform: rotate(calc(var(--bell-tilt) - 5deg)) scale(.94); } to { transform: rotate(calc(var(--bell-tilt) + 5deg)) scale(.98); } }
@keyframes bell-fall { 0% { transform: rotate(var(--bell-tilt)) scale(.95); } 55% { transform: rotate(-10deg) scale(1.06); } 78% { transform: rotate(7deg); } 100% { transform: rotate(0) scale(1); } }
.notification-bell span { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 1px 5px; border: 2px solid white; border-radius: 14px; box-sizing: border-box; background: #c62828; color: white; font-size: 11px; font-weight: bold; line-height: 16px; }
.notification-panel { position: absolute; top: 62px; right: 0; display: flex; flex-direction: column; width: min(370px,calc(100vw - 28px)); max-height: min(620px,calc(100vh - 95px)); overflow: hidden; border: 1px solid #d6d9dd; border-radius: 15px; background: #f5f6f7; box-shadow: 0 20px 55px rgba(0,0,0,.28); }
.notification-panel[hidden] { display: none; }
.notification-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: #1f2933; color: white; }
.notification-panel > header h2 { margin: 0; font-size: 21px; }
.notification-panel > header small { display: block; margin-top: 3px; color: #d9e0e6; }
.notification-panel > header > button { border: 0; background: transparent; color: white; font-size: 29px; cursor: pointer; }
.notification-compose { padding: 12px; border-bottom: 1px solid #ddd; background: white; }
.notification-compose > button { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: #ffcc00; color: #171717; font-weight: bold; cursor: pointer; }
.notification-compose form { display: grid; gap: 9px; margin-top: 11px; }
.notification-compose form[hidden] { display: none; }
.notification-compose form label { display: grid; gap: 4px; color: #353b40; font-size: 12px; font-weight: bold; }
.notification-compose input, .notification-compose select, .notification-compose textarea { width: 100%; margin: 0; padding: 9px; border: 1px solid #b9bec4; border-radius: 7px; box-sizing: border-box; font: inherit; font-weight: normal; resize: vertical; }
.notification-compose .notification-file { padding: 8px; border: 1px dashed #aeb4ba; border-radius: 7px; background: #fafafa; }
.notification-compose form > div { display: flex; gap: 7px; }
.notification-compose form > div button { flex: 1; padding: 9px; border: 0; border-radius: 7px; background: #217346; color: white; font-weight: bold; cursor: pointer; }
.notification-compose form > div button.secondary { background: #e5e7e9; color: #333; }
.notification-list { flex: 1 1 auto; min-height: 0; max-height: 430px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.notification-item { margin-bottom: 7px; padding: 10px; border: 1px solid #d8dbdf; border-left: 5px solid #9aa2aa; border-radius: 9px; background: white; }
.notification-item.unread { border-left-color: #ffcc00; background: #fffdf4; }
.notification-item-head { display: grid; grid-template-columns: 28px minmax(0,1fr) 26px; gap: 6px; align-items: start; }
.notification-item-head > span { font-size: 19px; }
.notification-item-head > div { min-width: 0; }
.notification-subject { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: #1e272e; font: inherit; font-size: 13px; font-weight: bold; text-align: left; cursor: pointer; }
.notification-subject:hover { color: #175f9b; }
.notification-subject b { color: #777; }
.notification-dismiss { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: #eceff1; color: #6c7379; font-size: 18px; line-height: 25px; cursor: pointer; }
.notification-dismiss:hover { background: #f9dedb; color: #a12424; }
.notification-item-head small { display: block; }
.notification-item-head small { margin-top: 2px; color: #747b81; font-size: 10px; }
.notification-detail { padding-top: 4px; }
.notification-item p { margin: 9px 0; color: #3f464c; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.notification-attachment, .notification-open { display: block; margin: 7px 0; color: #17683a; font-size: 12px; font-weight: bold; overflow-wrap: anywhere; }
.notification-open { color: #175f9b; }
.notification-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.notification-actions span { margin-right: auto; color: #38734e; font-size: 11px; font-weight: bold; }
.notification-actions button { padding: 6px 8px; border: 0; border-radius: 6px; background: #e2e6e9; color: #333; font-size: 11px; font-weight: bold; cursor: pointer; }
.notification-actions button.danger { background: #fde5e2; color: #9b2921; }
.notification-empty { padding: 30px 12px; color: #737a80; text-align: center; }

@media (max-width: 600px) {
  .notification-center { top: 10px; right: 10px; }
  .notification-bell { width: 46px; height: 46px; font-size: 20px; }
  .notification-panel { position: fixed; top: 64px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 72px); }
  .notification-list { max-height: calc(100vh - 190px); }
}

/* MICROINTERACCIONES SUAVES */
:where(button, a, input, select, textarea, summary) { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease; }

:where(.card,.summary-card,.cliente-card,.portal-client-card,.today-item,.fleet-card,.maquina-card,.accounting-cards > div,.analysis-metrics > div,.economic-kpis > div,.fleet-summary > div,.vademecum-summary > div,.diagnosis-grid article,.projection-grid > div,.payment-proof-row) {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
  transform-origin: center;
}
:where(.ficha-img,.maquina-img,.fleet-card-image img,.spreadsheet tbody tr) { transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease, background-color .22s ease, box-shadow .22s ease; }

main > .hero { animation: content-reveal .58s 1.02s cubic-bezier(.2,.8,.2,1) both; }
main > section:not(.hero) { animation: content-reveal .58s 1.1s cubic-bezier(.2,.8,.2,1) both; }

@keyframes content-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  :where(.card,.summary-card,.accounting-cards > div,.analysis-metrics > div,.economic-kpis > div,.fleet-summary > div,.vademecum-summary > div):hover {
    z-index: 2;
    transform: translateY(-5px) scale(1.025);
    box-shadow: 0 17px 38px rgba(31,41,51,.16);
  }

  :where(.cliente-card,.portal-client-card,.today-item,.payment-proof-row):hover {
    transform: translateX(5px) scale(1.008);
    border-color: #e1bd20;
    box-shadow: 0 10px 25px rgba(31,41,51,.1);
  }

  :where(.fleet-card,.maquina-card,.diagnosis-grid article,.projection-grid > div):hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 15px 34px rgba(31,41,51,.14);
  }

  .library-sections button:hover { transform: translateY(-6px) scale(1.018); box-shadow: 0 18px 40px rgba(31,41,51,.16); }
  aside button:hover { transform: translateX(6px); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
  :where(.actions,.record-actions,.editor-actions,.settings-actions,.calendar-header,.notification-compose) button:not(.notification-bell):hover { transform: translateY(-2px) scale(1.025); box-shadow: 0 7px 16px rgba(31,41,51,.16); }
  .spreadsheet tbody tr:hover { background: #fff8d8; box-shadow: inset 4px 0 0 #ffcc00; }
  :where(.ficha-img,.maquina-img,.fleet-card-image img):hover { transform: scale(1.018); filter: saturate(1.06) contrast(1.02); }
}

:where(button,a):active { transform: scale(.965); transition-duration: .08s; }
:where(input,select,textarea):focus { outline: none; border-color: #d2a900; box-shadow: 0 0 0 4px rgba(255,204,0,.18); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* TRANSICIÓN DE ENTRADA EN TODAS LAS HOJAS */
body::before {
  content: "SOLFLEX";
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 55px;
  box-sizing: border-box;
  background: radial-gradient(circle at center, #343d45 0, #1f2933 55%, #11171d 100%);
  color: #ffcc00;
  font-size: clamp(48px,9vw,105px);
  font-weight: 900;
  letter-spacing: .13em;
  text-indent: .13em;
  text-shadow: 0 8px 28px rgba(0,0,0,.45);
  pointer-events: all;
  animation: solflex-loading-screen 1.25s ease-in-out forwards;
}

body::after {
  content: "CARGANDO...";
  position: fixed;
  top: calc(50% + 45px);
  left: 0;
  z-index: 99999;
  width: 100%;
  color: white;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .35em;
  text-align: center;
  text-indent: .35em;
  pointer-events: none;
  animation: solflex-loading-text 1.25s ease-in-out forwards;
}

@keyframes solflex-loading-screen {
  0% { opacity: 1; visibility: visible; }
  68% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes solflex-loading-text {
  0%,25% { opacity: .35; visibility: visible; transform: translateY(5px); }
  55% { opacity: 1; visibility: visible; transform: translateY(0); }
  72% { opacity: .55; visibility: visible; }
  100% { opacity: 0; visibility: hidden; transform: translateY(-4px); }
}

/* INICIO DEL PORTAL DE CLIENTES */
.client-home { background: #f2f3f4; }
.client-home-hero { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(230px,.7fr); gap: 30px; align-items: center; min-height: 410px; padding: 54px; border-radius: 24px; background: radial-gradient(circle at 85% 20%,#3c4851 0,#202a32 42%,#11171c 100%); color: white; overflow: hidden; }
.client-home-hero-copy { max-width: 820px; }
.client-home-eyebrow,.client-home-kicker { display: inline-block; color: #b18600; font-size: 12px; font-weight: 900; letter-spacing: .17em; }
.client-home-eyebrow { color: #ffcc00; }
.client-home-hero h1 { max-width: 800px; margin: 15px 0; font-size: clamp(40px,5vw,68px); line-height: 1.02; letter-spacing: -.035em; }
.client-home-hero p { max-width: 720px; color: #dce1e5; font-size: 19px; line-height: 1.55; }
.client-home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.client-home-actions a { padding: 13px 18px; border-radius: 10px; background: #ffcc00; color: #111; font-weight: bold; text-decoration: none; }
.client-home-actions a.secondary { border: 1px solid #63707a; background: rgba(255,255,255,.07); color: white; }
.client-home-year { display: flex; width: 220px; height: 220px; margin: auto; border: 1px solid rgba(255,204,0,.42); border-radius: 50%; background: rgba(255,204,0,.07); align-items: center; justify-content: center; flex-direction: column; box-shadow: 0 0 0 18px rgba(255,204,0,.035); text-align: center; }
.client-home-year small { color: #ffcc00; font-weight: bold; letter-spacing: .18em; }
.client-home-year strong { font-size: 55px; line-height: 1.1; }
.client-home-year span { max-width: 130px; color: #d9dfe3; font-size: 12px; }
.client-home-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 18px 0; }
.client-home-stats article { padding: 22px; border-top: 5px solid #ffcc00; border-radius: 14px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.client-home-stats strong,.client-home-stats span { display: block; }
.client-home-stats strong { font-size: 29px; }
.client-home-stats span { margin-top: 4px; color: #666; }
.client-home-about { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; padding: 55px; border-radius: 20px; background: white; }
.client-home-about h2,.client-home-purpose h2,.client-home-section-heading h2,.client-home-contact h2 { margin: 10px 0 0; font-size: clamp(29px,3.4vw,45px); line-height: 1.12; letter-spacing: -.025em; }
.client-home-about p,.client-home-purpose p,.client-home-contact p { margin-top: 0; color: #525b62; font-size: 17px; line-height: 1.7; }
.client-home-purpose { margin-top: 18px; padding: 50px; border-radius: 20px; background: #ffcc00; }
.client-home-purpose .client-home-kicker { color: #5d4900; }
.client-home-purpose h2 { max-width: 960px; }
.client-home-purpose p { max-width: 900px; margin: 18px 0 0; color: #493a00; }
.client-home-services,.client-home-timeline { margin-top: 18px; padding: 50px; border-radius: 20px; background: white; }
.client-home-section-heading { max-width: 800px; margin-bottom: 30px; }
.client-home-service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.client-home-service-grid article { padding: 24px; border: 1px solid #e0e3e5; border-radius: 15px; background: #fafafa; }
.client-home-service-grid article > span { font-size: 29px; }
.client-home-service-grid h3 { margin: 16px 0 8px; }
.client-home-service-grid p,.client-home-timeline-grid p,.client-home-values p { margin: 0; color: #5b6369; line-height: 1.5; }
.client-home-timeline-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.client-home-timeline-grid article { position: relative; padding: 30px 28px 10px 0; border-top: 3px solid #d9dcde; }
.client-home-timeline-grid article::before { content:""; position:absolute; top:-8px; left:0; width:13px; height:13px; border:2px solid white; border-radius:50%; background:#ffcc00; box-shadow:0 0 0 2px #ffcc00; }
.client-home-timeline-grid strong { color: #9a7600; }
.client-home-timeline-grid h3 { margin: 10px 0 7px; }
.client-home-values { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px; }
.client-home-values article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 22px; border-radius: 14px; background: white; }
.client-home-values article > span { display: flex; width: 36px; height: 36px; border-radius: 50%; background: #ffcc00; align-items: center; justify-content: center; font-weight: bold; }
.client-home-values h3 { margin: 0 0 5px; }
.client-home-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 35px; margin-top: 18px; padding: 45px; border-radius: 20px; background: #182128; color: white; }
.client-home-contact .client-home-kicker { color: #ffcc00; }
.client-home-contact p { margin-top: 15px; color: #c9d0d5; }
.client-home-contact-links { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 9px; }
.client-home-contact-links a,.client-home-contact-links span { color: white; font-weight: bold; text-decoration: none; }
.client-home-contact-links a:hover { color: #ffcc00; }
.client-home-source { margin: 18px 0 0; color: #737a80; font-size: 12px; text-align: center; }
.client-home-source a { color: #17683a; font-weight: bold; }

@media (hover:hover) and (pointer:fine) {
  :where(.client-home-stats article,.client-home-service-grid article,.client-home-values article):hover { transform: translateY(-5px) scale(1.018); box-shadow: 0 16px 34px rgba(31,41,51,.14); }
  .client-home-year:hover { transform: rotate(-3deg) scale(1.035); box-shadow: 0 0 0 24px rgba(255,204,0,.05); }
}

:where(.client-home-stats article,.client-home-service-grid article,.client-home-values article,.client-home-year) { transition: transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease; }

@media (max-width: 900px) {
  .client-home-hero,.client-home-about,.client-home-contact { grid-template-columns: 1fr; padding: 30px; }
  .client-home-year { width: 170px; height: 170px; }
  .client-home-year strong { font-size: 44px; }
  .client-home-stats,.client-home-service-grid { grid-template-columns: repeat(2,1fr); }
  .client-home-services,.client-home-timeline,.client-home-purpose { padding: 30px; }
}

@media (max-width: 560px) {
  .client-home-stats,.client-home-service-grid,.client-home-timeline-grid,.client-home-values { grid-template-columns: 1fr; }
  .client-home-hero h1 { font-size: 38px; }
  .client-home-timeline-grid article { padding-bottom: 22px; }
}

/* JUEGO SECRETO SOLFLEX */
aside h2.solflex-game-logo { position: relative; width: max-content; cursor: pointer; user-select: none; }
aside h2.solflex-game-logo::after { content:"🎮"; position:absolute; top:-5px; right:-24px; font-size:13px; opacity:0; transform:translateY(4px) rotate(-8deg); transition:opacity .22s ease,transform .22s ease; }
aside h2.solflex-game-logo:hover { text-shadow: 0 0 18px rgba(255,204,0,.45); transform: scale(1.025); }
aside h2.solflex-game-logo:hover::after,aside h2.solflex-game-logo:focus::after { opacity:1; transform:translateY(0) rotate(0); }
.solflex-game-overlay { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,10,13,.82); backdrop-filter:blur(12px); animation:game-overlay-in .28s ease both; }
.solflex-game-shell { width:min(1180px,100%); max-height:96vh; overflow-x:hidden; overflow-y:auto; border:1px solid #46525a; border-radius:22px; background:#151d23; color:white; box-shadow:0 30px 90px rgba(0,0,0,.5); animation:game-shell-in .4s cubic-bezier(.2,.8,.2,1) both; }
.solflex-game-shell > header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px 13px; }
.solflex-game-shell > header small { color:#ffcc00; font-weight:900; letter-spacing:.17em; }
.solflex-game-shell > header h2 { max-width:720px; margin:5px 0 0; font-size:25px; line-height:1.08; text-transform:uppercase; }
.solflex-game-heading p { margin:8px 0 0; color:#cbd3d8; font-size:14px; font-weight:bold; }
.solflex-game-shell > header button { width:38px; height:38px; padding:0; border:1px solid #52606a; border-radius:50%; background:#26323a; color:white; font-size:27px; cursor:pointer; }
.solflex-game-picker { display:flex; gap:8px; padding:0 24px 14px; }
.solflex-game-picker button { padding:9px 13px; border:1px solid #46535c; border-radius:9px; background:#222d34; color:#c9d1d6; font-weight:bold; cursor:pointer; }
.solflex-game-picker button.active { border-color:#ffcc00; background:#ffcc00; color:#111; box-shadow:0 5px 16px rgba(255,204,0,.18); }
.solflex-game-score { display:flex; gap:22px; padding:0 24px 12px; color:#b9c2c8; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.solflex-game-score strong { margin-left:5px; color:#ffcc00; font-size:18px; }
.solflex-game-stage { position:relative; margin:0 18px; overflow:hidden; border:2px solid #39464e; border-radius:14px; background:#263641; box-shadow:inset 0 0 30px rgba(0,0,0,.2); }
.solflex-game-stage canvas { display:block; width:100%; height:auto; touch-action:none; cursor:pointer; }
.solflex-game-state { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,29,.55); backdrop-filter:blur(3px); text-align:center; }
.solflex-game-state[hidden] { display:none; }
.solflex-game-state > div { max-width:430px; padding:25px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(20,29,35,.88); box-shadow:0 15px 45px rgba(0,0,0,.3); }
.solflex-game-state strong,.solflex-game-state span { display:block; }
.solflex-game-state strong { color:#ffcc00; font-size:28px; }
.solflex-game-state span { margin:9px 0 18px; color:#d8dfe3; line-height:1.45; }
.solflex-game-state button { padding:11px 18px; border:0; border-radius:9px; background:#ffcc00; color:#111; font-weight:bold; cursor:pointer; }
.solflex-game-shell > footer { display:flex; justify-content:space-between; gap:15px; padding:15px 24px 20px; color:#aeb8be; font-size:12px; }
.solflex-game-shell kbd { padding:4px 7px; border:1px solid #59666e; border-bottom-width:3px; border-radius:5px; background:#27333b; color:white; font:inherit; }
.solflex-ranking { margin:0 18px 18px; padding:18px; border:1px solid #38454d; border-radius:14px; background:#202a31; }
.solflex-ranking-title { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.solflex-ranking-title > span { font-size:27px; }
.solflex-ranking-title small { color:#ffcc00; font-weight:900; letter-spacing:.14em; }
.solflex-ranking-title h3 { margin:3px 0 0; font-size:17px; }
.solflex-ranking-list { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.solflex-ranking-row { display:grid; grid-template-columns:27px 1fr auto; gap:8px; align-items:center; min-width:0; padding:8px 10px; border-radius:8px; background:#172027; }
.solflex-ranking-row b { display:flex; width:23px; height:23px; border-radius:50%; background:#354149; align-items:center; justify-content:center; color:#ffcc00; font-size:11px; }
.solflex-ranking-row span { overflow:hidden; color:#d9e0e4; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.solflex-ranking-row strong { color:#ffcc00; font-size:13px; }
.solflex-ranking-empty { grid-column:1/-1; margin:3px 0; color:#aeb8be; font-size:13px; }
.logistics-game-shell { width:min(1180px,100%); }
.logistics-score { flex-wrap:wrap; }
.logistics-game-stage canvas { background:#e9f4f8; }
.logistics-controls { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:13px 18px 5px; }
.logistics-controls button { min-height:45px; padding:9px; border:1px solid #46545d; border-radius:9px; background:#27333b; color:white; font-weight:bold; cursor:pointer; touch-action:none; user-select:none; }
.logistics-controls button:hover,.logistics-controls button:active { border-color:#ffcc00; background:#35434c; }
.logistics-controls button.action { border-color:#ffcc00; background:#ffcc00; color:#111; }
#mensajeLogistica { transition:color .2s ease; }
#mensajeLogistica.error { color:#ff8c78; }
@keyframes game-overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes game-shell-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:650px) {
  .solflex-game-overlay { padding:8px; }
  .solflex-game-shell > header { padding:15px 16px 10px; }
  .solflex-game-shell > header h2 { font-size:19px; }
  .solflex-game-picker { padding:0 16px 12px; overflow-x:auto; }
  .solflex-game-picker button { flex:0 0 auto; }
  .solflex-game-score { padding:0 16px 10px; }
  .solflex-game-stage { margin:0 8px; }
  .solflex-game-shell > footer { align-items:flex-start; flex-direction:column; padding:13px 16px 17px; }
  .solflex-game-state > div { padding:18px; }
  .solflex-game-state strong { font-size:23px; }
  .solflex-ranking { margin:0 8px 8px; padding:14px; }
  .solflex-ranking-list { grid-template-columns:1fr; }
  .logistics-controls { grid-template-columns:1fr 1fr; padding:10px 8px 3px; }
  .logistics-controls button.action { grid-column:1/-1; }
}