.on-call-card { margin-top: 20px; padding: 20px; }
.on-call-toolbar, .on-call-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:12px 0; }
.on-call-row { border-bottom:1px solid #d9e1df; }
.on-call-row > div:first-child { flex:1; min-width:180px; }
.on-call-row small { display:block; overflow-wrap:anywhere; }
.on-call-totals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.on-call-totals article { background:#edf7f4; padding:16px; }
.on-call-totals strong { display:block; font-size:1.3rem; }
.on-call-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-top:16px; }
.on-call-grid article { padding:12px; border:1px solid #d9e1df; min-height:100px; overflow-wrap:anywhere; }
.on-call-grid small,.on-call-grid span { display:block; }
.on-call-dialog { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-top:4px solid #5cc7b5; border-radius:14px; }
.on-call-dialog .dialog-card { width:auto; max-height:calc(100dvh - 32px); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.on-call-dialog header,.on-call-dialog footer { padding:20px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-shrink:0; }
.on-call-form-body { overflow-y:auto; padding:0 20px 20px; min-height:0; }
.on-call-form-body label { display:block; margin:12px 0; }
.on-call-dialog button,.on-call-card button { min-height:44px; }
.on-call-card [hidden] { display:none; }
.on-call-card .help-tip-button { min-height:22px; }
.on-call-card h3 { display:flex; align-items:center; gap:8px; }
.on-call-card h3 .help-tip { display:inline-flex; }
@media(max-width:700px) { .on-call-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .on-call-totals { grid-template-columns:repeat(2,minmax(0,1fr)); } .on-call-dialog footer { flex-wrap:wrap; } .on-call-dialog .field-grid { grid-template-columns:1fr; } }

@media(max-width:700px) { .on-call-weekday,.on-call-offset { display:none; } }

.on-call-toolbar [aria-pressed="true"] { background:#111b17; color:white; border-color:#111b17; }

/* Guardia a mano (2026-10-23): dos botones en la cabecera y avisos para no pagar dos veces. */
.on-call-card > header { flex-wrap:wrap; }
.on-call-actions { display:flex; gap:8px; flex-wrap:wrap; }
.on-call-row small.on-call-warning, p.on-call-warning { color:var(--amber); font-weight:600; }
p.on-call-warning { background:var(--amber-soft); border-left:3px solid var(--amber); padding:8px 12px; }