/* assets/ui.css */

/* ===== Base ===== */
:root{
  --ring: 59 130 246;           /* blue-500 */
  --ring2: 99 102 241;          /* indigo-500 */
  --text: 15 23 42;             /* slate-900 */
  --muted: 100 116 139;         /* slate-500 */
  --border: 226 232 240;        /* slate-200 */
  --bg: 255 255 255;
}

*{ -webkit-tap-highlight-color: transparent; }
body{ color: rgb(var(--text)); }

/* ===== Card shadow helper (si lo usas en vistas) ===== */
.shadow-card{
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}
.shadow-soft{
  box-shadow: 0 10px 40px rgba(0,0,0,.06);
}

/* ===== Inputs / Selects / Textareas ===== */
.input,
.select,
.textarea{
  width: 100%;
  border-radius: 1rem; /* 16px */
  border: 1px solid rgb(var(--border));
  background: rgb(var(--bg));
  padding: .72rem .95rem;
  font-size: .95rem;
  font-weight: 600;
  color: rgb(var(--text));
  transition: box-shadow .2s ease, border-color .2s ease, transform .08s ease, background .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(0,0,0,.04);
}

.textarea{ min-height: 110px; resize: vertical; }

.input::placeholder,
.textarea::placeholder{
  color: rgb(var(--muted));
  font-weight: 600;
  opacity: .75;
}

/* Hover */
.input:hover,
.select:hover,
.textarea:hover{
  border-color: rgba(var(--ring), .35);
}

/* Focus */
.input:focus,
.select:focus,
.textarea:focus{
  outline: none;
  border-color: rgba(var(--ring), .65);
  box-shadow:
    0 0 0 4px rgba(var(--ring), .12),
    0 1px 2px rgba(0,0,0,.04);
}

/* Invalid */
.input:invalid:not(:placeholder-shown),
.textarea:invalid:not(:placeholder-shown){
  border-color: rgba(239, 68, 68, .55); /* red-500 */
}
.input:invalid:not(:placeholder-shown):focus,
.textarea:invalid:not(:placeholder-shown):focus{
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

/* Disabled */
.input:disabled,
.select:disabled,
.textarea:disabled{
  background: rgb(248 250 252); /* slate-50 */
  color: rgb(100 116 139);
  cursor: not-allowed;
  opacity: .8;
}

/* Select arrow nicer */
.select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(100,116,139,.9) 50%),
    linear-gradient(135deg, rgba(100,116,139,.9) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

/* ===== File input (bonito) ===== */
input[type="file"].input{
  padding: .55rem .8rem;
  font-weight: 700;
}
input[type="file"].input::file-selector-button{
  border: 0;
  margin-right: .8rem;
  padding: .55rem .8rem;
  border-radius: .9rem;
  background: linear-gradient(90deg, rgb(59 130 246), rgb(79 70 229));
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(59,130,246,.25);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
input[type="file"].input::file-selector-button:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(79,70,229,.28);
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 1.05rem;
  padding: .72rem 1.05rem;
  font-size: .9rem;
  font-weight: 900;
  color: white;
  background: linear-gradient(90deg, rgb(59 130 246), rgb(79 70 229));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 26px rgba(59,130,246,.22);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

.btn:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(79,70,229,.25);
}

.btn:active{
  transform: translateY(0px) scale(.99);
}

.btn:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Neutral button helper */
.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 1.05rem;
  padding: .72rem 1.05rem;
  font-size: .9rem;
  font-weight: 900;
  color: rgb(51 65 85);
  background: white;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn-ghost:hover{
  background: rgb(248 250 252);
  border-color: rgb(203 213 225);
  transform: translateY(-1px);
}

/* ===== Tables ===== */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(71 85 105);
  background: rgb(248 250 252);
  border-bottom: 1px solid rgb(226 232 240);
  padding: .85rem .9rem;
}
.table tbody td{
  padding: .9rem .9rem;
  border-bottom: 1px solid rgb(241 245 249);
  vertical-align: top;
}
.table tbody tr:hover{
  background: rgba(59,130,246,.04);
}

/* ===== Badges / chips ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  border: 1px solid rgb(226 232 240);
  background: white;
}
.chip-dot{
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
}

/* ===== Modal smoother ===== */
.modal-card{
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
  border: 1px solid rgba(226,232,240,.9);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ================================
   ✨ SweetAlert2 - Mejor UI
================================ */
.swal2-popup.swal2-modal{
  border-radius: 22px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 35px 90px rgba(0,0,0,.22) !important;
}

.swal2-title{
  margin: 0 !important;
  padding: 18px 20px 8px 20px !important;
  text-align: left !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.swal2-html-container{
  margin: 0 !important;
  padding: 0 20px 18px 20px !important;
  text-align: left !important;
}

.swal2-actions{
  margin: 0 !important;
  padding: 14px 20px 18px 20px !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.08));
  border-top: 1px solid rgba(15,23,42,.08);
}

.swal2-confirm{
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
  box-shadow: 0 12px 28px rgba(79,70,229,.20) !important;
}

.swal2-cancel{
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 900 !important;
  background: rgba(15,23,42,.06) !important;
  color: #0f172a !important;
}

.swal2-input, .swal2-textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  box-shadow: 0 10px 20px rgba(99,102,241,.07) !important;
}

.swal2-validation-message{
  border-radius: 14px !important;
  font-weight: 800 !important;
}