/* A paper-and-copper workspace, scoped to the Spanish day calculator. */
body:has(.page-days-calculator) {
  background: radial-gradient(ellipse at 10% 5%, #efe6d7 0, transparent 40%), #f6f3ec;
  color: #263c35;
}
.page-days-calculator { align-items: start; padding-top: 0; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.daycalc-page {
  --dc-ink: #263c35;
  --dc-muted: #59665d;
  --dc-copper: #934724;
  --dc-line: #dfd9cc;
  width: min(100%, 1080px);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  color: var(--dc-ink);
}
.daycalc-page [hidden] { display: none !important; }
.daycalc-page button, .daycalc-page input { font: inherit; }
.daycalc-heading { text-align: center; padding: 24px 16px 4px; }
.daycalc-heading-icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  color: var(--dc-copper); background: #f5e6d6; border: 1px solid #dfc4ab;
  border-radius: 16px; transform: rotate(-6deg); margin-bottom: 16px;
}
.daycalc-heading-icon svg { width: 27px; height: 27px; transform: rotate(6deg); }
.daycalc-heading h1 {
  font: 700 clamp(32px, 4vw, 54px)/1.1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em; color: var(--dc-ink); margin: 0;
}
.daycalc-heading p { color: var(--dc-muted); max-width: 580px; margin: 16px auto 0; line-height: 1.7; }
.daycalc-workbench {
  border: 1px solid var(--dc-line); border-radius: 28px; padding: 10px;
  background: #fffefa; box-shadow: 0 18px 55px #463b2610; min-width: 0;
}
.daycalc-tabs {
  display: flex; gap: 6px; padding: 7px; background: #f1eee6;
  border-radius: 18px; width: fit-content; max-width: 100%; margin: 12px auto 8px;
}
.daycalc-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 12px; min-height: 46px; padding: 10px 20px;
  color: #555f55; font-size: 14px; font-weight: 700; cursor: pointer; background: transparent;
}
.daycalc-tabs button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.daycalc-tabs button[aria-selected="true"] { background: #934724; color: #fff; box-shadow: 0 3px 8px #93472424; }
.daycalc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; padding: 14px 0 0; }
.daycalc-input-side { padding: 22px 28px 20px; min-width: 0; }
.daycalc-page fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.daycalc-input-side h2 { margin: 0; font-size: 23px; line-height: 1.3; letter-spacing: -.025em; color: var(--dc-ink); }
.daycalc-form-hint { margin: 9px 0 26px; font-size: 14px; color: var(--dc-muted); line-height: 1.6; }
.daycalc-input-side label:not(.daycalc-check):not(.daycalc-operation label) { display: grid; gap: 9px; font-size: 14px; font-weight: 600; }
.daycalc-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.daycalc-input-side input[type="date"], .daycalc-input-side input[type="number"] {
  width: 100%; min-width: 0; max-width: 100%; min-height: 54px;
  border: 1px solid #c7cec2; border-radius: 12px; background: #fff;
  padding: 12px 13px; color: #263c35; font-size: 16px; font-weight: 600;
  box-sizing: border-box; box-shadow: 0 2px 3px #263c3504; appearance: auto;
}
.daycalc-input-side input[aria-invalid="true"] { border-color: #a02f23; background: #fff7f4; }
.daycalc-page :is(button, input, a):focus-visible { outline: 3px solid #986339; outline-offset: 3px; }
.daycalc-date-tools, .daycalc-presets { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 22px; }
.daycalc-date-tools button, .daycalc-presets button {
  background: transparent; border: 0; padding: 5px 0; min-height: 44px;
  color: var(--dc-copper); cursor: pointer; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.daycalc-date-tools button span { font-size: 18px; vertical-align: middle; }
.daycalc-check {
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px;
  background: #f2f4ed; border: 1px solid #dce2d4; border-radius: 12px;
  padding: 16px; margin: 0 0 24px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.daycalc-check input { margin: 2px 0 0; width: 19px; height: 19px; flex: 0 0 auto; accent-color: #2b5946; }
.daycalc-check small { display: block; margin-top: 5px; color: var(--dc-muted); line-height: 1.5; font-weight: 400; font-size: 12px; }
.daycalc-page .daycalc-operation { display: flex; gap: 8px; margin: 22px 0; }
.daycalc-operation legend { font-size: 14px; font-weight: 600; margin-bottom: 9px; }
.daycalc-operation label { position: relative; flex: 1; cursor: pointer; }
.daycalc-operation input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.daycalc-operation span { display: grid; place-items: center; min-height: 46px; padding: 8px; border: 1px solid #c7cec2; border-radius: 10px; font-size: 14px; color: var(--dc-muted); }
.daycalc-operation input:checked + span { background: #edf3eb; border-color: #527059; color: #2b5946; font-weight: 700; }
.daycalc-operation input:focus-visible + span { outline: 3px solid #986339; outline-offset: 3px; }
.daycalc-presets { margin-bottom: 14px; }
.daycalc-presets button { padding: 4px 12px; background: #f8f3eb; border: 1px solid #e3d9c9; border-radius: 9px; text-decoration: none; }
.daycalc-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.daycalc-calculate {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  min-height: 52px; background: #28543f; color: #fff; border: 1px solid #28543f;
  border-radius: 12px; padding: 12px 20px; font-weight: 700 !important; cursor: pointer;
}
.daycalc-calculate:hover { background: #1d422f; }
.daycalc-calculate svg { width: 19px; height: 19px; }
.daycalc-reset { background: none; border: 0; min-height: 44px; padding: 8px 0; color: var(--dc-muted); cursor: pointer; font-size: 13px !important; text-decoration: underline; text-underline-offset: 4px; }
.daycalc-calendar-note { display: flex; gap: 8px; align-items: flex-start; margin: 17px 0 0; color: var(--dc-muted); font-size: 12px; line-height: 1.6; }
.daycalc-calendar-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: #2b5946; }
.daycalc-error { border-left: 3px solid #a02f23; padding: 10px 12px; margin: 0 0 16px; color: #84271e; background: #fff0eb; border-radius: 4px; font-size: 14px; line-height: 1.5; }
.daycalc-result {
  border-radius: 20px; border: 1px solid #e8dac5; padding: 27px 26px 20px;
  background: radial-gradient(circle at 100% 0, #f5e6cf 0, transparent 55%), #fbf6ec;
  text-align: center; min-width: 0; scroll-margin-top: 20px;
}
.daycalc-result-heading { display: flex; align-items: center; justify-content: center; gap: 9px; color: #6b523d; }
.daycalc-result-heading h2 { font-size: 14px; font-weight: 600; margin: 0; color: inherit; letter-spacing: 0; }
.daycalc-result-heading svg { width: 19px; height: 19px; }
.daycalc-answer { padding: 24px 0 20px; }
.daycalc-answer strong { display: block; font: 700 clamp(60px, 8vw, 96px)/1 Georgia, 'Times New Roman', serif; color: var(--dc-copper); letter-spacing: -.05em; overflow-wrap: anywhere; }
.daycalc-answer > span { display: block; margin-top: 8px; font-size: 16px; color: #6b523d; }
.daycalc-result.is-date .daycalc-answer { padding-top: 38px; padding-bottom: 32px; }
.daycalc-result.is-date .daycalc-answer strong { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.15; letter-spacing: -.035em; }
.daycalc-range { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 14px 0; border-top: 1px dashed #d9c6ae; font-size: 13px; color: #665947; }
.daycalc-range time { font-weight: 600; }
.daycalc-range > span { color: var(--dc-copper); }
.daycalc-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 17px; }
.daycalc-breakdown > div { background: #fffaf2; border: 1px solid #e7dbc9; padding: 15px 8px; border-radius: 12px; }
.daycalc-breakdown strong { display: block; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--dc-ink); }
.daycalc-breakdown span { display: block; font-size: 11px; line-height: 1.4; color: #665947; margin-top: 6px; }
.daycalc-result-note, .daycalc-offset-summary { color: #665947; font-size: 12px; line-height: 1.7; margin: 12px 0; }
.daycalc-offset-summary { font-size: 14px; border-top: 1px dashed #d9c6ae; padding-top: 18px; }
.daycalc-page > .share-panel { margin-top: -16px; border-color: #e2d2ba; background: #fffefa; box-shadow: none; }
.daycalc-page > .share-panel .share-actions { justify-content: center; gap: 8px; flex-wrap: wrap; }
.daycalc-page > .share-panel .share-button { width: 40px; height: 40px; min-height: 40px; min-width: 40px; border-color: #d9c6ae; background: #fffefa; }
.daycalc-page > .share-panel .share-button.primary { color: #fff; background: #934724; border-color: #934724; }
.daycalc-guide { border-top: 3px solid #b98b60; border-radius: 4px 4px 22px 22px; background: #fffefa; padding: 32px clamp(20px, 5vw, 60px); box-shadow: 0 10px 35px #463b2607; }
.daycalc-guide h2 { font: 700 27px/1.3 Georgia, 'Times New Roman', serif; color: var(--dc-ink); letter-spacing: -.025em; margin: 28px 0 12px; padding-top: 26px; border-top: 1px solid var(--dc-line); }
.daycalc-guide h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.daycalc-guide h3 { font-size: 17px; line-height: 1.5; color: var(--dc-ink); margin: 23px 0 8px; }
.daycalc-guide :is(p, li) { color: var(--dc-muted); font-size: 15px; line-height: 1.85; margin: 0 0 12px; }
.daycalc-guide a { color: #934724; text-underline-offset: 3px; }
.daycalc-noscript { color: var(--dc-muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 800px) {
  .daycalc-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .daycalc-input-side { padding: 20px 22px 22px; }
  .daycalc-page { max-width: 620px; gap: 22px; }
  .daycalc-result { padding: 25px 22px 18px; }
}
@media (max-width: 560px) {
  .daycalc-heading { padding: 20px 6px 0; }
  .daycalc-heading h1 { font-size: 34px; }
  .daycalc-heading p { font-size: 14px; margin-top: 12px; }
  .daycalc-heading-icon { width: 44px; height: 44px; margin-bottom: 13px; border-radius: 13px; }
  .daycalc-workbench { border-radius: 22px; padding: 8px; }
  .daycalc-tabs { width: 100%; margin: 4px auto 0; gap: 4px; padding: 5px; }
  .daycalc-tabs button { flex: 1; padding: 9px 7px; font-size: 12px; gap: 6px; }
  .daycalc-tabs button svg { width: 16px; height: 16px; }
  .daycalc-input-side { padding: 18px 12px 20px; }
  .daycalc-input-side h2 { font-size: 21px; }
  .daycalc-form-hint { margin-bottom: 20px; }
  .daycalc-date-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .daycalc-check { padding: 13px; }
  .daycalc-form-actions { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .daycalc-reset { justify-self: center; }
  .daycalc-result { padding: 24px 15px 18px; border-radius: 16px; }
  .daycalc-page > .share-panel .share-actions { gap: 4px; }
  .daycalc-answer strong { font-size: 76px; }
  .daycalc-guide { padding: 25px 20px; }
  .daycalc-guide h2 { font-size: 24px; }
}