/* Autostudio — componentes Fase 4: toasts, modal, chips de fecha, errores de campo. */

/* ---------- Toasts ---------- */
#toasts{
  position:fixed;right:18px;bottom:18px;z-index:100;
  display:flex;flex-direction:column;gap:9px;max-width:min(360px,calc(100vw - 28px));
}
@media (max-width:820px){#toasts{left:14px;right:14px;bottom:calc(var(--nav-h) + 14px);align-items:center;}}
.toast{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
  box-shadow:var(--shadow);padding:11px 14px;font-size:13px;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;
}
.toast.in{opacity:1;transform:none;}
.toast.out{opacity:0;transform:translateY(6px);}
.toast-action{
  border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-strong);
  font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;
}

/* ---------- Modal ---------- */
#modal-root:empty{display:none;}
.modal-back{
  position:fixed;inset:0;z-index:90;background:rgba(3,6,10,.6);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  width:min(400px,100%);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:18px;box-shadow:var(--shadow);padding:22px;
}
.modal-title{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 8px;}
.modal-body{font-size:13.5px;color:var(--ink-dim);margin:0 0 18px;line-height:1.5;}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;}
@media (max-width:720px){
  .modal-back{padding:12px;align-items:flex-end;}
  .modal{width:100%;max-height:92vh;overflow-y:auto;border-radius:18px 18px 14px 14px;}
  .modal-actions .modal-btn{flex:1;}
}
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px;}
}
.modal-btn{min-height:44px;font-size:13.5px;font-weight:700;padding:8px 18px;border-radius:11px;cursor:pointer;border:1px solid var(--line);}
.modal-btn.ghost{background:transparent;color:var(--ink-dim);}
.modal-btn.ghost:hover{color:var(--ink);border-color:var(--line-strong);}
.modal-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:transparent;color:#06231B;}
:root[data-theme="light"] .modal-btn.primary{color:#fff;background:var(--accent);}
.modal-btn.primary:hover{filter:brightness(1.06);}
.modal-btn.danger{background:var(--negative);border-color:var(--negative);color:#fff;}

/* ---------- Errores de campo ---------- */
.field-err{display:none;font-size:11.5px;font-weight:600;color:var(--negative);margin-top:5px;}
.field-err.show{display:block;}
.field input[aria-invalid="true"]{border-color:var(--negative) !important;}

/* ---------- Fecha relativa en filas ---------- */
.rd-rel{font-weight:600;font-size:12.5px;}
.rd-abs{font-size:11px;color:var(--ink-faint);font-family:var(--font-num);}

/* ---------- Modal de edición ---------- */
.modal-edit{width:min(460px,100%);}
.modal-edit .field{margin-bottom:12px;}
.modal-edit .field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);margin-bottom:5px;}
.modal-edit .field input,.modal-edit .field select{
  width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font-family:var(--font-ui);font-size:13.5px;padding:9px 10px;border-radius:var(--radius-sm);
}
.modal-edit .field input:focus,.modal-edit .field select:focus{outline:none;border-color:var(--accent);}
.modal-edit .field input[aria-invalid="true"]{border-color:var(--negative);}
.modal-edit .modal-actions{margin-top:16px;}
.opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-faint);}
.field label .opt{font-size:11px;}

/* ---------- Skeletons ---------- */
.skel-wrap{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.skel{height:52px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);position:relative;overflow:hidden;}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 70%);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}

/* ---------- Empty states ---------- */
.empty-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 60%,transparent),var(--surface));
  border:1px dashed var(--line-strong);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);padding:34px 24px;margin-bottom:20px;text-align:center;
}
.empty-card svg{width:54px;height:54px;color:var(--ink-faint);margin-bottom:12px;}
.empty-card h3{font-family:var(--font-display);font-size:19px;margin:0 0 6px;}
.empty-card p{font-size:13px;color:var(--ink-dim);margin:0 0 16px;}
.empty-cta{
  display:inline-block;min-height:44px;font-size:13.5px;font-weight:700;color:#06231B;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:1px solid transparent;border-radius:11px;padding:10px 22px;cursor:pointer;
}
:root[data-theme="light"] .empty-cta{color:#fff;background:var(--accent);}
.empty-inline{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px;text-align:center;}
.empty-inline svg{width:38px;height:38px;color:var(--ink-faint);}
.empty-inline p{font-size:12.5px;color:var(--ink-faint);font-style:italic;margin:0;}

/* ---------- Menú exportar ---------- */
.export-wrap{position:relative;}
.export-menu{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:40;min-width:230px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
  box-shadow:var(--shadow);padding:6px;display:none;
}
.export-menu.open{display:block;}
.export-menu button{
  display:flex;width:100%;text-align:left;gap:9px;align-items:center;
  background:transparent;border:none;color:var(--ink);font-family:var(--font-ui);
  font-size:13px;font-weight:600;padding:11px 12px;border-radius:9px;cursor:pointer;min-height:44px;
}
.export-menu button:hover{background:var(--surface-2);}
.export-menu button small{display:block;font-weight:400;color:var(--ink-faint);font-size:11px;}