@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600&display=swap');

:root {
  --green-950: #113a27;
  --green-900: #164c31;
  --green-800: #24613c;
  --green-700: #347647;
  --green-100: #e7f0e5;
  --sage: #b8c9aa;
  --ochre: #dfa514;
  --ochre-soft: #fff5d8;
  --coral: #d85a3f;
  --coral-soft: #fff0ec;
  --ink: #202722;
  --muted: #66716a;
  --line: #dce2db;
  --surface: #ffffff;
  --background: #fafbf8;
  --shadow: 0 8px 24px rgba(22, 76, 49, .07);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 228px;
  flex-direction: column;
  padding: 30px 15px 20px;
  overflow-y: auto;
  color: white;
  background:
    radial-gradient(circle at 20% 90%, rgba(111,153,91,.22), transparent 32%),
    linear-gradient(155deg, var(--green-900), var(--green-950));
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 35px; }
.brand-mark { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid #c8d75c; border-radius: 50%; color: #d5df69; }
.brand-mark span { font-size: 24px; transform: rotate(-24deg); }
.brand-mark i { position: absolute; right: -4px; bottom: 2px; width: 17px; height: 8px; border: 1.5px solid #d5df69; border-radius: 100% 0; transform: rotate(-20deg); }
.brand strong { display: block; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.72); font-size: 12px; }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav a { display: flex; align-items: center; gap: 14px; min-height: 49px; padding: 0 16px; border-radius: 10px; color: rgba(255,255,255,.82); font-weight: 500; text-decoration: none; transition: .18s ease; }
.sidebar nav a:hover { color: white; background: rgba(255,255,255,.08); }
.sidebar nav a.active { color: white; background: linear-gradient(90deg, rgba(126,169,98,.55), rgba(108,157,83,.38)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.profile { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 20px 10px 0; border-top: 1px solid rgba(255,255,255,.2); }
.profile .avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid white; border-radius: 50%; color: var(--green-900); background: white; font-weight: 700; }
.profile strong, .profile small { display: block; }
.profile small { margin-top: 2px; color: rgba(255,255,255,.58); font-size: 12px; }

main { min-height: 100vh; margin-left: 228px; padding: 30px 34px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.topbar h1 { margin: 0; font-size: 28px; letter-spacing: -.6px; }
.topbar p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; transition: .18s ease; }
.button .icon { width: 18px; height: 18px; }
.button.primary { color: white; background: var(--green-800); box-shadow: 0 4px 12px rgba(22,76,49,.17); }
.button.primary:hover { background: var(--green-900); transform: translateY(-1px); }
.button.secondary { color: var(--green-900); border-color: var(--line); background: white; }
.button.secondary:hover { border-color: var(--sage); background: var(--green-100); }
.icon-button { position: relative; display: inline-grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 9px; color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; }
.icon-button:hover { background: var(--green-100); }
.notification { position: absolute; top: -2px; right: 0; display: grid; min-width: 19px; height: 19px; place-items: center; border: 2px solid var(--background); border-radius: 999px; color: var(--green-950); background: #ffd65a; font-size: 10px; font-weight: 700; }
.mobile-menu { display: none; }
.mobile-appbar, .mobile-bottom-nav { display: none; }
.mobile-app-actions{display:flex;align-items:center;gap:2px}.mobile-menu-trigger{display:none}
.quick-add-card{width:min(560px,calc(100% - 28px))}.quick-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:4px 24px 26px}.quick-add-grid button{display:flex;min-height:126px;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:14px 8px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fafbf8;cursor:pointer;font-family:inherit}.quick-add-grid button:hover{border-color:var(--sage);background:var(--green-100);transform:translateY(-1px)}.quick-add-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:var(--green-800);background:var(--green-100)}.quick-add-grid strong{font-size:13px}.quick-add-grid small{color:var(--muted);font-size:10px}
.flash { margin: -12px 0 22px; padding: 12px 16px; border: 1px solid #bad2b7; border-radius: 9px; color: var(--green-900); background: #edf7eb; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.metrics article { display: flex; min-height: 118px; align-items: center; gap: 15px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metrics small, .metrics strong, .metrics em { display: block; }
.metrics small { color: #4e5751; }
.metrics strong { margin: 4px 0; white-space: nowrap; font-size: clamp(22px, 2vw, 27px); letter-spacing: -.5px; }
.metrics em { color: var(--muted); font-size: 11px; font-style: normal; }
.metric-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.metric-icon .icon { width: 27px; height: 27px; }
.metric-icon.green { color: var(--green-800); background: var(--green-100); }
.metric-icon.sage { color: var(--green-700); background: #edf3e9; }
.metric-icon.ochre { color: #b47d00; background: var(--ochre-soft); }
.metric-icon.coral { color: var(--coral); background: var(--coral-soft); }
.metrics.compact { max-width: 650px; grid-template-columns: repeat(2, 1fr); }
.metrics.compact article { min-height: 100px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr); gap: 20px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-head { display: flex; min-height: 61px; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; }
.panel-head h2 { margin: 0; font-size: 18px; letter-spacing: -.25px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.panel-head a { display: inline-flex; align-items: center; gap: 5px; color: var(--green-800); font-size: 12px; text-decoration: none; }
.panel-head a .icon { width: 16px; height: 16px; }
.legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.cow-dot, .goat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green-700); }
.goat-dot { background: var(--ochre); }
.chart { width: 100%; padding: 0 14px 7px; overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 620px; height: 280px; }
.grid-line { stroke: #e8ece7; stroke-width: 1; }
.axis-label { fill: #737c76; font-family: "DM Sans", sans-serif; font-size: 11px; }
.series { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cow-line { stroke: var(--green-700); }
.goat-line { stroke: var(--ochre); }
.point { stroke: white; stroke-width: 2; }
.cow-point { fill: var(--green-700); }
.goat-point { fill: var(--ochre); }
.activity-list { border-top: 1px solid var(--line); }
.activity-list > div { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 16px; border-bottom: 1px solid #e8ece7; }
.activity-list > div:last-child { border-bottom: 0; }
.activity-list p { margin: 0; }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-size: 13px; }
.activity-list small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.activity-list time { color: var(--muted); font-size: 10px; }
.activity-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); }
.activity-icon.gold { color: #a97400; background: var(--ochre-soft); }
.activity-icon .icon { width: 17px; height: 17px; }
.attention { min-height: 275px; }
.distribution { min-height: 275px; }
.donut-row { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 14px 20px 26px; }
.donut { display: grid; width: 150px; height: 150px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--green-700) var(--cow), var(--ochre) 0); }
.donut::before { content: ""; grid-area: 1/1; width: 92px; height: 92px; border-radius: 50%; background: white; }
.donut span { z-index: 1; grid-area: 1/1; color: var(--muted); text-align: center; font-size: 11px; }
.donut strong { display: block; color: var(--ink); font-size: 28px; }
.donut-legend p { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 19px; }
.donut-legend i { margin-top: 5px; }
.donut-legend span, .donut-legend strong { display: block; }
.donut-legend span { color: var(--muted); font-size: 12px; }
.donut-legend strong { margin-bottom: 3px; color: var(--ink); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-top: 1px solid #e4e9e3; text-align: left; white-space: nowrap; }
th { color: #566159; background: #f6f8f4; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .35px; }
td { color: #525c55; font-size: 13px; }
td strong { color: var(--ink); }
tbody tr:hover { background: #fbfcfa; }
.status, .species { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 6px; color: #895f00; background: var(--ochre-soft); font-size: 11px; font-weight: 600; }
.status.activo, .status.pagado, .species { color: var(--green-800); background: var(--green-100); }
.status.crítico { color: #ba3c2e; background: var(--coral-soft); }
.status.en-proceso { color: #315c96; background: #eaf2ff; }
.status.vendido { color: #666; background: #efefef; }
.page-tools { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.tool-actions { display: flex; align-items: center; gap: 10px; }
.intro { color: var(--muted); }
.search { display: flex; width: min(460px, 100%); min-height: 44px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.search .icon { width: 19px; color: var(--muted); }
.search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.data-panel { overflow: hidden; }
.animal-filters { display: flex; align-items: end; gap: 14px; margin-bottom: 20px; padding: 12px 14px; }
.animal-filters label { display: grid; min-width: 180px; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.animal-filters select { height: 42px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: 13px; text-transform: none; }
.species-tabs { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.species-tabs a { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 14px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.species-tabs a:hover { background: var(--green-100); }
.species-tabs a.active { color: white; background: var(--green-800); }
.species-tabs strong { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 999px; color: inherit; background: rgba(255,255,255,.17); font-size: 10px; }
.animal-thumb { display: grid; width: 42px; height: 42px; overflow: hidden; place-items: center; border-radius: 9px; color: var(--green-700); background: var(--green-100); }
.animal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.animal-thumb .icon { width: 20px; height: 20px; }
.animal-link { color: inherit; text-decoration: none; }
.animal-link:hover { color: var(--green-700); text-decoration: underline; }
.profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.back-link { color: var(--green-700); font-size: 13px; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.animal-profile-head { position:relative;display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 20px; padding: 26px;overflow:hidden;background:linear-gradient(115deg,#fff 0%,#fff 62%,#f1f6ed 100%); }
.animal-profile-head::after{position:absolute;right:-45px;bottom:-70px;width:190px;height:190px;border:1px solid rgba(67,111,73,.10);border-radius:50%;content:'';pointer-events:none}
.profile-identity { display: flex; align-items: center; gap: 16px; }
.profile-animal-icon { display: grid; width: 72px; height: 72px; flex:0 0 auto;place-items: center;overflow:hidden;border:1px solid #d8e3d3;border-radius: 18px; color: var(--green-700); background: var(--green-100);box-shadow:0 6px 18px rgba(22,76,49,.10) }
.profile-animal-photo img{width:100%;height:100%;object-fit:cover}
.profile-animal-icon .icon { width: 34px; height: 34px; }
.profile-labels{display:flex;align-items:center;gap:7px}.profile-identity h2 { margin: 7px 0 4px; font-size: 27px;letter-spacing:-.4px }
.profile-identity p { display:flex;align-items:center;gap:8px;margin: 0; color: var(--muted); font-size: 12px; }.profile-identity p strong{color:var(--green-900);font-size:13px}.profile-identity p span{padding-left:8px;border-left:1px solid var(--line)}
.profile-facts { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 12px; }
.profile-facts div { position:relative;z-index:1;min-width:105px;padding:12px 14px;border:1px solid rgba(210,220,208,.85);border-radius:10px;background:rgba(255,255,255,.78); }
.profile-facts small, .profile-facts strong { display: block; }
.profile-facts small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.profile-facts strong { margin-top: 5px; font-size: 13px;line-height:1.3 }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.photo-panel { overflow: hidden; }
.photo-label { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.photo-label h2 { margin: 0; font-size: 17px; }
.photo-label small { color: var(--muted); font-size: 10px; }
.animal-photo { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-block: 1px solid var(--line); background: #f0f3ed; }
.animal-photo img { width: 100%; height: 100%; object-fit: cover; }
.animal-photo > span { display: grid; place-items: center; color: #8c978e; }
.animal-photo > span .icon { width: 52px; height: 52px; }
.animal-photo > span small { margin-top: 10px; }
.photo-upload { display: flex; align-items: center; gap: 9px; padding: 14px 18px 5px; }
.photo-upload label { cursor: pointer; }
.photo-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-note { margin: 5px 18px 16px; color: var(--muted); font-size: 10px; }
.profile-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; margin-bottom: 20px; }
.animal-details dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0 18px 20px; }
.animal-details dl div { padding: 15px 8px; border-bottom: 1px solid var(--line); }
.animal-details dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.animal-details dd { margin: 5px 0 0; font-size: 13px; font-weight: 600; }
.family-panel { min-height: 330px; padding-bottom: 20px; overflow: hidden; }
.family-tree { display: grid; place-items: center; padding: 5px 22px 0; }
.family-parents, .family-children { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.family-node { display: grid; min-width: 130px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; text-align: center; text-decoration: none; box-shadow: 0 3px 10px rgba(22,76,49,.05); }
.family-node small, .family-node strong, .family-node span { display: block; }
.family-node small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.family-node strong { margin-top: 3px; color: var(--green-900); font-size: 13px; }
.family-node span { margin-top: 2px; color: var(--muted); font-size: 10px; }
a.family-node:hover, .family-node a:hover { border-color: var(--sage); background: var(--green-100); }
.family-node a { color: inherit; text-decoration: none; }
.family-node.current { border-color: var(--green-700); background: var(--green-100); }
.family-line { display: block; width: 1px; height: 25px; background: var(--green-700); }
.family-line.down { height: 20px; }
.family-empty, .empty-inline { margin: 10px 20px 22px; color: var(--muted); font-size: 12px; text-align: center; }
.related-panel { margin-bottom: 20px; }
.related-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 0 18px 18px; }
.related-animals > a { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); text-decoration: none; }
.related-animals > a:hover { border-color: var(--sage); background: var(--green-100); }
.related-photo { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 8px; color: var(--green-700); background: var(--green-100); }
.related-photo img { width: 100%; height: 100%; object-fit: cover; }
.related-photo .icon { width: 19px; }
.related-animals strong, .related-animals small { display: block; }
.related-animals small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.quotes-panel { margin-bottom: 20px; }
.quote-animal-summary { grid-column: 1 / -1; padding: 13px 15px; border-radius: 9px; color: var(--green-900); background: var(--green-100); }
.quote-animal-summary strong, .quote-animal-summary span { display: block; }
.quote-animal-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.quote-document { max-width: 900px; margin: 0 auto; padding: 42px; }
.quote-document > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 2px solid var(--green-900); }
.quote-brand { display: flex; align-items: center; gap: 14px; }
.quote-brand strong, .quote-brand small, .quote-number small, .quote-number strong, .quote-number span { display: block; }
.quote-brand strong { color: var(--green-900); font-family: "Fraunces", Georgia, serif; font-size: 24px; }
.quote-brand small, .quote-number small, .quote-number span { color: var(--muted); font-size: 11px; }
.quote-number { text-align: right; }
.quote-number strong { margin: 5px 0; font-size: 19px; }
.quote-customer { display: flex; justify-content: space-between; gap: 30px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.quote-customer small, .quote-customer strong, .quote-customer span { display: block; }
.quote-customer small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.quote-customer strong { margin: 5px 0; }
.quote-customer span { color: var(--muted); font-size: 12px; }
.quote-document > h2 { margin: 28px 0 12px; font-size: 16px; }
.quote-animal-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px; border-radius: 10px; background: var(--green-100); }
.quote-animal-line strong, .quote-animal-line span { display: block; }
.quote-animal-line span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.quote-animal-line > strong { white-space: nowrap; color: var(--green-900); font-size: 20px; }
.quote-lineage { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; }
.quote-lineage div { padding: 0 18px; border-right: 1px solid var(--line); }
.quote-lineage div:first-child { padding-left: 0; }
.quote-lineage div:last-child { border-right: 0; }
.quote-lineage dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.quote-lineage dd { margin: 5px 0 0; font-weight: 600; }
.quote-notes { margin-top: 25px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
.quote-notes small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.quote-notes p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.quote-document footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 55px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote-document footer p { max-width: 420px; margin: 0; color: var(--muted); font-size: 10px; }
.quote-document footer div { text-align: center; }
.quote-document footer span, .quote-document footer small { display: block; }
.quote-document footer small { margin-top: 7px; color: var(--muted); font-size: 10px; }
.period-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 13px; margin-bottom: 13px; padding: 17px; }
.period-filter label, .medical-filter label { display: grid; min-width: 145px; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .35px; }
.period-filter input, .period-filter select, .medical-filter input, .medical-filter select { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: 13px; text-transform: none; }
.period-filter [hidden] { display: none; }
.period-caption { display: flex; align-items: center; gap: 9px; margin: 0 0 15px 3px; font-size: 12px; }
.period-caption span { color: var(--muted); }
.production-layout { display: grid; grid-template-columns: 1.5fr .5fr; gap: 20px; margin-bottom: 20px; }
.comparison-panel { min-width: 250px; }
.year-comparison { padding: 8px 20px 22px; }
.year-comparison > div { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; align-items: center; margin-bottom: 20px; }
.year-comparison > div span { grid-row: 1 / 3; color: var(--green-900); font-weight: 700; }
.year-comparison > div strong { font-size: 15px; }
.year-comparison i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #edf1eb; }
.year-comparison i b { display: block; height: 100%; border-radius: inherit; background: var(--green-700); }
.year-comparison > div:nth-child(2) i b { background: var(--sage); }
.year-comparison p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.reminder-panel { margin-bottom: 20px; overflow: hidden; }
.reminder-list { border-top: 1px solid var(--line); }
.reminder-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.reminder-list article:last-child { border-bottom: 0; }
.reminder-list article.overdue { background: #fff9f7; }
.reminder-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); }
.reminder-list .overdue .reminder-icon { color: var(--coral); background: var(--coral-soft); }
.reminder-icon .icon { width: 18px; height: 18px; }
.reminder-list strong, .reminder-list a { display: block; }
.reminder-list strong { font-size: 13px; }
.reminder-list a { margin-top: 3px; color: var(--green-700); font-size: 11px; text-decoration: none; }
.reminder-list time { color: var(--ink); font-size: 12px; font-weight: 600; text-align: right; }
.reminder-list time small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.medical-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; padding: 17px; }
.medical-filter label:first-of-type { min-width: 240px; flex: 1; }
.medical-history-panel { margin-top: 20px; }
.medical-timeline { padding: 0 18px 20px; }
.medical-timeline article { position: relative; display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; padding: 17px 0 17px 22px; border-bottom: 1px solid var(--line); }
.medical-timeline article:last-child { border-bottom: 0; }
.timeline-dot { position: absolute; top: 21px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--green-700); box-shadow: 0 0 0 4px var(--green-100); }
.timeline-dot.vacuna { background: var(--ochre); box-shadow: 0 0 0 4px var(--ochre-soft); }
.medical-timeline time { color: var(--muted); font-size: 11px; }
.medical-timeline h3 { margin: 0 0 6px; font-size: 14px; }
.medical-timeline p { margin: 4px 0; color: #505a53; font-size: 12px; }
.medical-timeline small { color: var(--muted); font-size: 10px; }
.inline-form { margin: 0; }
.text-button { padding: 0; border: 0; color: var(--green-700); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.text-button:hover { color: var(--green-950); text-decoration: underline; }
.status.resuelto { color: var(--green-800); background: var(--green-100); }
.status.borrador { color: #59635c; background: #edf0ed; }
.status.enviada { color: #315c96; background: #eaf2ff; }
.status.vendida { color: var(--green-800); background: var(--green-100); }
.report-filter { display: grid; grid-template-columns: 1fr 170px 170px auto; align-items: end; gap: 18px; margin-bottom: 20px; padding: 20px; }
.report-filter h2 { margin: 0; font-size: 18px; }
.report-filter p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.report-filter label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.report-filter input { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.report-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.report-summary { padding-bottom: 24px; }
.summary-row { display: flex; justify-content: space-between; padding: 14px 20px 8px; color: var(--muted); font-size: 13px; }
.summary-row strong { color: var(--ink); }
.progress { height: 8px; margin: 0 20px 8px; overflow: hidden; border-radius: 999px; background: #edf1eb; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--green-700); }
.progress.goat i { background: var(--ochre); }
.report-download { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 24px; }
.report-download .large-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); }
.report-download h2 { margin: 0; font-size: 17px; }
.report-download p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.report-download .button { grid-column: 1 / -1; }
.analytics-filter { display: flex; align-items: end; gap: 14px; margin-bottom: 18px; padding: 16px 18px; }
.analytics-filter > div { margin-right: auto; }
.analytics-filter h2 { margin: 0; font-size: 17px; }
.analytics-filter p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.analytics-filter label { display: grid; min-width: 155px; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.analytics-filter input { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: 13px; }
.analytics-main-chart { margin-bottom: 20px; overflow: hidden; }
.analytics-chart svg { height: 330px; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.yearly-panel, .top-producers-panel { min-height: 300px; overflow: hidden; }
.producer-list { border-top: 1px solid var(--line); }
.producer-list > a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 57px; padding: 8px 17px; border-bottom: 1px solid #e8ece7; color: inherit; text-decoration: none; }
.producer-list > a:hover { background: #fbfcfa; }
.producer-list b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: var(--green-800); background: var(--green-100); font-size: 11px; }
.producer-list span strong, .producer-list span small { display: block; }
.producer-list span strong { font-size: 13px; }
.producer-list span small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.producer-list em { color: var(--green-900); font-size: 14px; font-style: normal; font-weight: 700; }
.health-analysis-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 10px 18px 23px; }
.health-analysis-list > div { display: flex; align-items: center; gap: 12px; padding: 12px; border-right: 1px solid var(--line); }
.health-analysis-list > div:last-child { border-right: 0; }
.health-analysis-list .metric-icon { width: 44px; height: 44px; }
.health-analysis-list .metric-icon .icon { width: 22px; height: 22px; }
.health-analysis-list p, .health-analysis-list strong, .health-analysis-list small { display: block; margin: 0; }
.health-analysis-list strong { font-size: 22px; }
.health-analysis-list small { color: var(--muted); font-size: 10px; }
.analytics-empty { margin: 0; padding: 42px 20px; color: var(--muted); text-align: center; }
.quotation-modal-card { width: min(920px, 100%); }
.quotation-form { padding-bottom: 82px; }
.quotation-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 18px 22px; }
.quotation-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.quotation-fields label.full { grid-column: 1/-1; }
.quotation-fields input,.quotation-fields select,.quotation-animal-tools select { height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.quotation-animal-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 12px; }
.quotation-animal-tools .search { flex: 1; }
.quote-animal-picker { max-height: 390px; margin: 0 22px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.quote-animal-picker th { position: sticky; top: 0; z-index: 1; }
.quote-animal-picker td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.quote-animal-picker input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--green-800); }
.quote-animal-picker .quote-price { width: 150px; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; }
.quote-animal-picker .quote-price:disabled { background: #f3f5f2; }
.quotation-total { display: flex; align-items: center; justify-content: space-between; margin: 14px 22px; padding: 14px 16px; border-radius: 10px; color: var(--muted); background: var(--green-100); font-size: 13px; }
.quotation-total strong { color: var(--green-900); font-size: 18px; }
.quotation-actions { position: absolute; inset: auto 0 0; padding: 12px 22px; border-top: 1px solid var(--line); background: white; }
.quote-document tfoot td { padding: 18px 16px; border-top: 2px solid var(--green-800); font-size: 16px; }
.expense-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--ochre); }
.finance-chart-panel { margin-bottom: 20px; overflow: hidden; }
.finance-chart { padding: 0 14px 10px; overflow-x: auto; }
.finance-chart svg { display: block; width: 100%; min-width: 700px; height: 310px; }
.income-bar { fill: var(--green-700); }
.expense-bar { fill: var(--ochre); }
.finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.finance-breakdown { padding: 0 18px 18px; }
.finance-breakdown > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13px; }
.finance-breakdown p { color: var(--muted); }
.negative { color: var(--coral); }
.empty-state { max-width: 680px; margin: 80px auto; padding: 70px 30px; text-align: center; }
.empty-state .large-icon { display: grid; width: 70px; height: 70px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); }
.empty-state .large-icon .icon { width: 34px; height: 34px; }
.empty-state h2 { margin: 0 0 10px; }
.empty-state p { margin: 0 0 25px; color: var(--muted); }

.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15,35,23,.5); backdrop-filter: blur(3px); }
.modal.open { display: flex; animation: fadeIn .16s ease; }
.modal-card { width: min(600px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 16px; background: white; box-shadow: 0 30px 70px rgba(0,0,0,.22); animation: rise .22s ease; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 21px; }
.modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.modal-head button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 28px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 23px 24px 25px; }
.form-grid label { display: grid; gap: 7px; color: #4e5751; font-size: 12px; font-weight: 600; }
.form-grid label.full, .form-actions { grid-column: 1 / -1; }
.form-grid input, .form-grid select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #cfd7cf; border-radius: 8px; outline: none; color: var(--ink); background: white; font-size: 14px; font-weight: 400; }
.form-grid input:focus, .form-grid select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(52,118,71,.12); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 7px; }

@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1150px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .report-filter { grid-template-columns: 1fr 1fr; }
  .report-filter > div { grid-column: 1 / -1; }
  .report-layout { grid-template-columns: 1fr; }
  .production-layout { grid-template-columns: 1fr; }
  .animal-profile-head { align-items: flex-start; flex-direction: column; }
  .profile-facts { width: 100%; }
  .profile-grid { grid-template-columns: 1fr; }
  .finance-grid { grid-template-columns: 1fr; }
  .animal-filters { align-items: stretch; flex-wrap: wrap; }
  .species-tabs { width: 100%; }
  .analytics-filter { align-items: stretch; flex-wrap: wrap; }
  .analytics-filter > div { width: 100%; }
}
@media (max-width: 760px) {
  body { background: #fff; }
  .sidebar { inset: auto 10px calc(76px + env(safe-area-inset-bottom)) 10px; width: auto; max-height: 68vh; padding: 18px; border-radius: 20px; transform: translateY(calc(100% + 110px)); box-shadow: 0 18px 60px rgba(10,35,22,.26); transition: transform .24s ease; }
  .sidebar.open { transform: translateY(0); }
  .sidebar .brand { padding: 0 4px 15px; }
  .sidebar .brand-mark { width: 34px; height: 34px; }
  .sidebar .brand strong { font-size: 18px; }
  .sidebar nav { grid-template-columns: 1fr 1fr; gap: 6px; }
  .sidebar nav a { min-height: 48px; padding: 0 12px; }
  .sidebar .profile { display: none; }
  main { margin-left: 0; padding: 0 14px calc(104px + env(safe-area-inset-bottom)); }
  .mobile-appbar { position: sticky; top: 0; z-index: 14; display: flex; min-height: calc(64px + env(safe-area-inset-top)); align-items: flex-end; justify-content: space-between; margin: 0 -14px 20px; padding: env(safe-area-inset-top) 14px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 3px 14px rgba(22,76,49,.05); backdrop-filter: blur(14px); }
  .mobile-brand { display: flex; align-items: center; gap: 10px; color: var(--green-900); text-decoration: none; }
  .mobile-brand > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: var(--green-900); font-size: 15px; font-weight: 700; }
  .mobile-brand strong { font-size: 19px; }
  .mobile-appbar .icon-button { display: inline-grid; }
  .mobile-appbar .mobile-menu-trigger { display: inline-grid; }
  .mobile-menu { display: none; }
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 18px; }
  .topbar > div:first-of-type { min-width: 0; }
  .topbar h1 { overflow: hidden; margin: 0; font-size: 23px; white-space: nowrap; text-overflow: ellipsis; }
  .topbar p { font-size: 12px; }
  .topbar .top-actions .icon-button { display: none; }
  .topbar .primary { min-height: 48px; padding: 0 15px; border-radius: 12px; font-size: 13px; }
  .page-animal .topbar { display: none; }
  .page-animal .profile-toolbar { margin-top: 4px; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5,1fr); min-height: calc(72px + env(safe-area-inset-bottom)); padding: 6px 5px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 30px rgba(20,45,29,.09); backdrop-filter: blur(18px); }
  .mobile-bottom-nav > a, .mobile-bottom-nav > button { position: relative; display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 4px 2px; border: 0; color: #687069; background: transparent; font-family: inherit; font-size: 10px; font-weight: 600; text-decoration: none; }
  .mobile-bottom-nav .icon { width: 23px; height: 23px; }
  .mobile-bottom-nav > a.active { color: var(--green-800); }
  .mobile-bottom-nav > a.active::before { position: absolute; top: -7px; width: 42px; height: 3px; border-radius: 3px; background: var(--green-700); content: ''; }
  .mobile-bottom-nav .mobile-milk-action { width: 68px; height: 68px; align-self: end; justify-self: center; margin-top: -20px; border-radius: 50%; color: white; background: var(--green-800); box-shadow: 0 8px 20px rgba(22,76,49,.25); }
  .mobile-bottom-nav .mobile-milk-action .icon { width: 26px; height: 26px; }
  .quick-add-modal{align-items:flex-end;background:rgba(10,35,22,.38)}
  .quick-add-modal .quick-add-card{width:100%;min-height:auto;max-height:82dvh;border-radius:22px 22px 0 0;box-shadow:0 -18px 45px rgba(10,35,22,.22)}
  .quick-add-modal .modal-head{padding:20px 18px 14px}
  .quick-add-grid{grid-template-columns:repeat(3,1fr);gap:9px;padding:4px 14px calc(22px + env(safe-area-inset-bottom))}
  .quick-add-grid button{min-height:105px;padding:10px 5px}
  .metrics { display: grid; grid-auto-columns: minmax(112px, 1fr); grid-auto-flow: column; grid-template-columns: none; gap: 0; margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); scrollbar-width: none; }
  .metrics::-webkit-scrollbar { display: none; }
  .metrics article { min-height: 116px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 12px 9px; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; text-align: center; }
  .metrics article:last-child { border-right: 0; }
  .metric-icon { width: 38px; height: 38px; }
  .metric-icon .icon { width: 21px; height: 21px; }
  .metrics small { font-size: 11px; }
  .metrics strong { margin: 1px 0; font-size: 18px; }
  .metrics em { display: none; }
  .panel { border-radius: 14px; box-shadow: 0 5px 18px rgba(22,76,49,.06); }
  .panel-head { min-height: 56px; align-items: center; padding: 13px 14px; }
  .panel-head h2 { font-size: 16px; }
  .legend { flex-direction: row; gap: 10px; font-size: 10px; }
  .chart { padding: 0 4px 6px; overflow: hidden; }
  .chart svg { min-width: 330px; height: 230px; }
  .activity-panel { display: none; }
  .attention { order: 2; }
  .distribution { order: 3; }
  .attention table thead { display: none; }
  .attention table, .attention tbody, .attention tr { display: block; }
  .attention tr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 13px 36px 13px 15px; border-top: 1px solid var(--line); }
  .attention tr::after { position: absolute; top: 50%; right: 14px; color: var(--muted); content: '›'; font-size: 27px; transform: translateY(-50%); }
  .attention td { padding: 0; border: 0; white-space: normal; }
  .attention td:nth-child(2), .attention td:nth-child(4) { display: none; }
  .attention td:nth-child(3) { grid-row: 2; color: var(--muted); font-size: 11px; }
  .attention td:nth-child(5) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .page-tools { align-items: stretch; flex-direction: column; }
  .page-tools .button { width: 100%; align-self: stretch; }
  .search { width: 100%; min-height: 48px; }
  .animal-filters { gap: 9px; padding: 10px; }
  .species-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .species-tabs a { justify-content: center; padding: 0 7px; }
  .animal-filters label { min-width: 0; flex: 1 1 145px; }
  .animal-filters select { width: 100%; min-width: 0; height: 48px; font-size: 14px; }
  .analytics-filter { display: grid; grid-template-columns: 1fr 1fr; padding: 14px; }
  .analytics-filter > div { grid-column: 1 / -1; }
  .analytics-filter label { min-width: 0; }
  .analytics-filter input { width: 100%; height: 48px; font-size: 16px; }
  .analytics-filter .button { min-height: 48px; }
  .analytics-metrics { grid-auto-columns: minmax(128px, 1fr); }
  .analytics-main-chart .panel-head { align-items: flex-start; flex-direction: column; }
  .analytics-main-chart .chart { overflow-x: auto; }
  .analytics-main-chart .chart svg { min-width: 680px; height: 270px; }
  .analytics-grid { grid-template-columns: 1fr; }
  .health-analysis-list { grid-template-columns: 1fr; }
  .health-analysis-list > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .health-analysis-list > div:last-child { border-bottom: 0; }
  .quotation-fields { grid-template-columns: 1fr; padding: 16px; }
  .quotation-fields label.full { grid-column: auto; }
  .quotation-fields input,.quotation-fields select { height: 48px; font-size: 16px; }
  .quotation-animal-tools { align-items: stretch; flex-direction: column; padding: 0 16px 10px; }
  .quotation-animal-tools select { width: 100%; height: 48px; font-size: 15px; }
  .quote-animal-picker { max-height: 42vh; margin: 0 16px; }
  .quote-animal-picker table { min-width: 620px; }
  .quotation-total { margin: 12px 16px; }
  .quotation-actions { grid-template-columns: 1fr 1fr; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .quotation-actions .button:last-child { grid-column: 1/-1; }
  .quotation-form { padding-bottom: 145px; }
  .finance-chart svg { min-width: 680px; height: 270px; }
  .form-grid { grid-template-columns: 1fr; padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
  .form-grid label.full, .form-actions { grid-column: auto; }
  .form-grid input, .form-grid select { height: 48px; font-size: 16px; }
  .modal { align-items: stretch; padding: 0; background: white; }
  .modal-card { width: 100%; max-height: 100dvh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .modal-head { position: sticky; top: 0; z-index: 2; padding: calc(18px + env(safe-area-inset-top)) 16px 16px; background: white; }
  .modal-head h2 { font-size: 20px; }
  .modal-head button { display: grid; width: 44px; height: 44px; place-items: center; margin: -8px; }
  .form-actions { position: fixed; inset: auto 0 0; z-index: 3; display: grid; grid-template-columns: 1fr 1.5fr; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
  .form-actions .button { min-height: 48px; }
  #filterTable thead { display: none; }
  #filterTable, #filterTable tbody { display: block; }
  #filterTable tr { position: relative; display: grid; grid-template-columns: 54px 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; min-height: 74px; padding: 10px 34px 10px 12px; border-top: 1px solid var(--line); }
  #filterTable tr::after { position: absolute; top: 50%; right: 13px; color: var(--muted); content: '›'; font-size: 26px; transform: translateY(-50%); }
  #filterTable td { padding: 0; border: 0; white-space: normal; }
  #filterTable td:nth-child(1) { grid-row: 1 / 3; align-self: center; }
  #filterTable td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; }
  #filterTable td:nth-child(3) { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 11px; }
  #filterTable td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  #filterTable td:nth-child(n+5) { display: none; }
  .donut-row { gap: 20px; }
  .report-filter { grid-template-columns: 1fr; }
  .report-filter > div { grid-column: auto; }
  .photo-grid { grid-template-columns: 1fr; }
  .profile-facts { grid-template-columns: repeat(2, 1fr); }
  .animal-details dl { grid-template-columns: 1fr; }
  .profile-toolbar { align-items: stretch; flex-direction: column; }
  .profile-toolbar .button { align-self: flex-end; }
  .quote-document { padding: 25px 20px; }
  .quote-document > header, .quote-customer, .quote-animal-line { align-items: flex-start; flex-direction: column; }
  .quote-number { text-align: left; }
  .quote-lineage { grid-template-columns: 1fr; gap: 15px; }
  .quote-lineage div { padding: 0; border-right: 0; }
  .quote-document footer { align-items: stretch; flex-direction: column; }
  .tool-actions { align-items: stretch; flex-direction: column; }
  .reminder-list article { grid-template-columns: 38px 1fr; }
  .reminder-list time { text-align: left; }
  .medical-timeline article { grid-template-columns: 1fr; padding-left: 22px; }
}
@media (max-width: 440px) {
  .top-actions .icon-button { display: none; }
  .metrics, .metrics.compact { grid-template-columns: none; }
  .donut-row { align-items: flex-start; flex-direction: column; }
}
.profile small a { color: #dbe8d8; text-decoration: none; }
.role-guide { display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:20px;padding:18px; }
.role-guide div { padding:5px 18px;border-right:1px solid var(--line); }.role-guide div:last-child{border:0}.role-guide strong,.role-guide span{display:block}.role-guide strong{color:var(--green-900);font-size:13px}.role-guide span{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.45}
.role-tag{display:inline-flex;padding:5px 8px;border-radius:6px;background:#edf0ed;font-size:10px;font-weight:700}.role-tag.admin,.role-tag.manager{color:var(--green-800);background:var(--green-100)}.role-tag.operator{color:#895f00;background:var(--ochre-soft)}
.settings-list{display:grid;gap:14px;max-width:1050px}.settings-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:20px}.settings-item h2{margin:0;font-size:16px}.settings-item p{margin:5px 0 0;color:var(--muted);font-size:11px}.settings-upload{display:flex;align-items:center;gap:8px}.settings-upload input[type=file]{display:none}.settings-warning{display:flex;gap:12px;padding:15px 18px;border:1px solid #efc8be;border-radius:11px;color:#9c3e31;background:var(--coral-soft)}.settings-warning p{margin:0;font-size:12px;line-height:1.5}
.changelog-panel{overflow:hidden}.changelog-list{display:grid}.changelog-list article{display:grid;grid-template-columns:145px 1fr auto;gap:18px;padding:18px 20px;border-top:1px solid var(--line)}.changelog-version strong,.changelog-version time{display:block}.changelog-version strong{color:var(--green-900);font-size:13px}.changelog-version time,.changelog-list small{margin-top:5px;color:var(--muted);font-size:10px}.changelog-list p{margin:0;color:#4e5751;font-size:12px;line-height:1.75}.changelog-list small{white-space:nowrap}
.setup-body,.login-body{min-height:100vh;background:var(--green-950)}.setup-shell{display:grid;min-height:100vh;grid-template-columns:310px minmax(0,1fr);margin:0;padding:0}.setup-brand{display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;background:linear-gradient(155deg,var(--green-900),var(--green-950));text-align:center}.setup-brand .brand-mark{width:64px;height:64px}.setup-brand strong{margin-top:18px;font-family:"Fraunces",serif;font-size:32px}.setup-brand p{color:#d8c553}.setup-content{padding:45px clamp(20px,7vw,110px);background:#fafbf8}.setup-heading{text-align:center}.setup-heading h1{margin:0;font-family:"Fraunces",serif;color:var(--green-950);font-size:34px}.setup-heading p{color:var(--muted)}
.setup-steps{display:grid;grid-template-columns:repeat(5,1fr);max-width:760px;margin:35px auto;padding:0;list-style:none;counter-reset:setup}.setup-steps li{position:relative;padding-top:36px;color:var(--muted);text-align:center;font-size:10px;counter-increment:setup}.setup-steps li::before{position:absolute;top:0;left:50%;z-index:1;display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--line);border-radius:50%;background:white;content:counter(setup);transform:translateX(-50%)}.setup-steps li::after{position:absolute;top:14px;left:0;width:100%;height:1px;background:var(--line);content:''}.setup-steps li:first-child::after{left:50%;width:50%}.setup-steps li:last-child::after{width:50%}.setup-steps li.done::before,.setup-steps li.active::before{color:white;border-color:var(--green-800);background:var(--green-800)}
.setup-card{display:grid;max-width:580px;gap:15px;margin:0 auto;padding:30px;border:1px solid var(--line);border-radius:14px;background:white;box-shadow:var(--shadow)}.setup-card h2,.setup-card p{margin:0;text-align:center}.setup-card p{color:var(--muted);font-size:12px}.setup-card label,.login-card label{display:grid;gap:6px;color:#4e5751;font-size:12px;font-weight:600}.setup-card input,.login-card input{height:48px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:16px}.setup-icon{display:grid;width:54px;height:54px;margin:0 auto;place-items:center;border-radius:50%;color:var(--green-800);background:var(--green-100);font-weight:700}.setup-note{display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:9px;color:var(--green-900);background:var(--green-100);font-size:11px}.setup-note span{color:var(--muted)}.setup-error{padding:11px;border-radius:8px;color:#9c3e31;background:var(--coral-soft);font-size:12px}
.login-shell{display:grid;width:min(440px,calc(100% - 28px));min-height:100vh;align-content:center;gap:20px;margin:auto}.login-brand{display:flex;align-items:center;justify-content:center;gap:12px;color:white}.login-brand strong,.login-brand small{display:block}.login-brand strong{font-family:"Fraunces",serif;font-size:25px}.login-brand small{color:#cbd8ce}.login-card{display:grid;gap:17px;padding:30px;border-radius:16px;background:white;box-shadow:0 25px 70px rgba(0,0,0,.25)}.login-card h1,.login-card p{margin:0}.login-card p{color:var(--muted)}
@media(max-width:760px){.role-guide{grid-template-columns:1fr 1fr}.settings-item{grid-template-columns:44px 1fr;padding:16px}.settings-item>:last-child{grid-column:1/-1}.settings-upload{align-items:stretch;flex-direction:column}.settings-upload .button{width:100%;min-height:48px}.changelog-list article{grid-template-columns:1fr;gap:8px;padding:16px}.changelog-list small{margin-top:0}}
@media(max-width:440px){.setup-shell{display:block}.setup-brand{display:none}.setup-content{min-height:100vh;padding:25px 14px}.setup-heading h1{font-size:28px}.setup-card{padding:20px 16px}.setup-steps{margin:25px 0}.setup-steps li{overflow:hidden;white-space:nowrap;text-indent:-999px}.role-guide{grid-template-columns:1fr}.role-guide div{border-right:0;border-bottom:1px solid var(--line)}}
.setup-card hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--line)}
.database-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:12px;border:1px solid var(--line);border-radius:9px}.database-choice legend{padding:0 5px;color:var(--green-900);font-size:12px;font-weight:700}.database-choice label{display:flex;align-items:center;gap:8px;padding:10px;border-radius:7px;background:#f5f7f3}.database-choice input,.migrate-check input{width:18px;height:18px}
.mysql-fields{display:grid;grid-template-columns:1fr 110px;gap:12px;padding:16px;border-radius:10px;background:#f6f8f4}.mysql-fields label:nth-child(3),.mysql-fields label:nth-child(4),.mysql-fields label:nth-child(5),.mysql-fields .migrate-check{grid-column:1/-1}.mysql-fields .migrate-check{display:flex;align-items:center;gap:9px;color:var(--green-900)}
@media(max-width:440px){.database-choice,.mysql-fields{grid-template-columns:1fr}.mysql-fields label{grid-column:1!important}}
@media(max-width:760px){.quick-add-modal{align-items:flex-end;padding:0;background:rgba(10,35,22,.38)}.quick-add-modal .quick-add-card{width:100%;min-height:auto;max-height:82dvh;border-radius:22px 22px 0 0;box-shadow:0 -18px 45px rgba(10,35,22,.22)}.quick-add-modal .modal-head{padding:20px 18px 14px}.quick-add-modal .quick-add-grid{grid-template-columns:repeat(3,1fr);gap:9px;padding:4px 14px calc(22px + env(safe-area-inset-bottom))}.quick-add-modal .quick-add-grid button{min-height:105px;padding:10px 5px}}
@media print {
  .sidebar, .topbar, .page-tools, .metrics, .no-print { display: none !important; }
  main { margin: 0; padding: 0; }
  .panel { border: 0; box-shadow: none; }
  .quote-document { max-width: none; padding: 10mm; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}