.guard-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1rem 0}
.guard-controls input{padding:.65rem;border:1px solid var(--color-action-border);border-radius:6px;max-width:100%}
/* Compact desktop ledger: one contact per line, with space shared by the text columns. */
#contenido .guard-workspace{width:calc(100% - 32px);max-width:none}
.guard-table{overflow:auto;max-width:100%;margin:1rem 0;border:1px solid var(--color-action-border);border-radius:8px}
.guard-table table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:1310px}
.guard-table th,.guard-table td{padding:4px;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:middle}
.guard-table th{background:var(--color-primary);color:var(--color-text);white-space:nowrap}
.guard-table caption{text-align:left;padding:8px}
.guard-table input{box-sizing:border-box;width:100%;min-width:0;min-height:36px;padding:4px 6px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text)}
.guard-table input:focus{outline:2px solid var(--color-secondary);outline-offset:1px}
.guard-table .guard-date{width:140px}
.guard-table .guard-time{width:100px}
.guard-table .guard-city{width:10%}
.guard-table .guard-condition{width:140px}
.guard-table .guard-call{width:100px}
.guard-table .guard-notes{width:10%}
.guard-table .guard-frequency{width:112px}
.guard-table .guard-mode{width:72px}
.guard-table .guard-expiry{width:202px}
.guard-table .guard-actions{width:84px}
#contenido .guard-table .rf-button{box-sizing:border-box;width:100%;min-height:36px;padding:4px 6px;white-space:nowrap}
.guard-field-label{display:none}
.guard-help{max-width:80ch}
@media(pointer:coarse){
 .guard-table input{min-height:48px}
 #contenido .guard-table .rf-button{min-height:44px}
}
@media(max-width:600px){.guard-controls button{width:100%}}

.guard-mobile{display:none}
@media(max-width:1100px){
 .guard-mobile{display:block;max-width:720px;margin:16px auto}
 .guard-table,#agregar{display:none}
 .guard-mobile form{padding:16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);margin-bottom:24px}
 .guard-mobile-heading,.guard-mobile-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
 .guard-mobile-heading h2{margin:0}
 .guard-mobile label{display:block;margin:12px 0}
 .guard-mobile input{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:10px;margin-top:4px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text)}
 .guard-mobile summary{padding:12px 0;cursor:pointer}
 .guard-mobile form button{margin:8px 8px 0 0}
 .guard-mobile form button[type=submit]{width:100%;margin-right:0}
 .guard-contact{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;width:100%;text-align:left;padding:12px 0;border:0;border-bottom:1px solid var(--color-border);background:transparent;color:var(--color-text);cursor:pointer;min-height:56px}
 .guard-contact-info{display:block;overflow-wrap:anywhere;margin-top:4px}
 .guard-mobile-pages{margin-top:16px}
 .guard-help{max-width:none}
}

.guard-defaults{align-items:end}
.guard-defaults label{display:block;flex:1 1 190px;max-width:300px}
.guard-defaults input{display:block;box-sizing:border-box;width:100%;min-height:48px;margin-top:4px}
#contenido .guard-expired{color:#B42318;background:#FFF1F0;border-color:#B42318}
.guard-mobile button[hidden]{display:none}
.guard-suggestions{max-height:240px;overflow-y:auto;border:1px solid var(--color-secondary);border-radius:8px;background:var(--color-surface);margin-top:4px}
.guard-suggestions[hidden]{display:none}
.guard-suggestions [role="option"]{padding:8px 12px;min-height:44px;box-sizing:border-box;cursor:pointer}
.guard-suggestions [aria-selected="true"],.guard-suggestions [role="option"]:hover{background:var(--color-primary)}
@media(max-width:1100px){
 #guard-main-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 #guard-main-fields label{min-width:0}
 #guard-main-fields label:has(#mobile-city),#guard-main-fields label:has(#mobile-name),#guard-main-fields label:has(#mobile-notes),#guard-main-fields label:has(#mobile-expiry){grid-column:1/-1}
}
@media(max-width:600px){.guard-defaults label{max-width:none;flex-basis:100%}}

@media(min-width:1600px){.guard-table .guard-name{width:24%}.guard-table .guard-notes{width:auto}}
