/* Hogar CRM · hc-mejoras2.css (v2.60 / v1.38) */

/* --- Selector de iconos --- */
.hc-ico-modal{max-width:520px; width:calc(100% - 32px);}
.hc-ico-modal input[type=search]{width:100%; margin:6px 0 12px;}
.hc-ico-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:6px; max-height:46vh; overflow:auto; padding:2px;}
.hc-ico-b{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--walnut); cursor:pointer; font-size:18px;}
.hc-ico-b:hover{border-color:var(--gold); color:var(--accent-ink);}
.hc-ico-b.on{border-color:var(--gold); background:var(--gold-dim); color:var(--accent-ink);}
.hc-ico-b:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.hc-ico-est{padding:6px 10px; font-size:12.5px; margin-left:auto; margin-right:10px; white-space:nowrap;}
.hc-ico-est i{margin-right:4px;}
.hc-ce-h{flex-wrap:wrap; gap:6px;}
.estancia-ico-row{font-size:15px; width:20px; text-align:center; flex-shrink:0;}
.estancia-gestion-row .hc-ico-btn{flex-shrink:0;}

/* --- Estados vacíos personalizados --- */
.empty-state.hc-vacio-on > i, .empty-state.hc-vacio-on > .il{display:none !important;}
.empty-state .hc-vacio{display:block; margin:0 auto 10px; line-height:1;}
.empty-state .hc-vacio i{font-size:46px; color:var(--walnut-soft);}
.empty-state .hc-vacio img{display:block; margin:0 auto; width:96px; height:96px; object-fit:contain;}
.hc-va{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line);}
.hc-va:first-of-type{border-top:0;}
.hc-va-v{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; font-size:20px; color:var(--walnut); background:var(--ivory); flex-shrink:0; overflow:hidden;}
.hc-va-v img{width:30px; height:30px; object-fit:contain;}
.hc-va-n{flex:1; min-width:150px; font-weight:600; font-size:13.5px; color:var(--walnut);}
.hc-va-a{display:flex; gap:6px; flex-wrap:wrap;}
.hc-va-a .btn{padding:6px 10px; font-size:12.5px;}
@media (max-width:700px){ .hc-va-a{width:100%;} }

/* --- Contactos --- */
.ct-fila{align-items:flex-start;}
.ct-acc{display:flex; gap:4px; flex-shrink:0;}
.ct-info{margin-top:6px; font-size:12.5px; color:var(--walnut-soft); white-space:pre-wrap; overflow-wrap:anywhere; max-width:64ch;}
.ct-meta{margin-top:5px; display:flex; gap:8px 12px; flex-wrap:wrap; align-items:center; font-size:12.5px;}
.ct-link{color:var(--accent-ink); text-decoration:none; overflow-wrap:anywhere;}
.ct-link:hover{text-decoration:underline;}
.ct-cumple i{margin-right:4px;}
.ct-botones{display:flex; gap:8px; flex-wrap:wrap;}
.tabs{flex-wrap:wrap;}

/* --- Botiquín: cuadro general del tratamiento --- */
.bq-trat textarea{width:100%; min-height:96px;}
.bq-trat .hint, .item-trat{font-size:12.5px;}
.item-trat{margin-top:4px; color:var(--walnut-soft); white-space:pre-wrap; overflow-wrap:anywhere;}
.item-trat i{margin-right:4px; color:var(--mc-botiquin);}
.nav-item[data-view="botiquin"] i:first-child{color:var(--mc-botiquin);}
.nav-item[data-view="cosmeticos"] i:first-child{color:var(--mc-cosmeticos);}

/* --- Campos de fecha/hora legibles en modo claro y oscuro (color-scheme hace que el icono del calendario sea blanco en oscuro) --- */
input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]{min-height:38px;}
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.8;}
body.dark-mode input[type="date"], body.dark-mode input[type="month"], body.dark-mode input[type="time"], body.dark-mode input[type="datetime-local"]{color-scheme:dark;}