/* ==========================================================
   Miss Uñas — Panel · extras
   Componentes propios (formularios de cita, editor de config,
   barra del kiosko, diagnóstico) con los tokens del CRM de Jon.
   ========================================================== */

/* ---------- Drawer móvil ---------- */
.menu-toggle{ display:none; }
.menu-overlay{ display:none; }
@media (max-width:1000px){
    .menu-toggle{
        display:inline-flex; position:fixed; top:12px; left:12px; z-index:1002;
        width:42px; height:42px; align-items:center; justify-content:center;
        background:var(--bg-card,#fff); border:1px solid var(--border-light,#e5e5ea);
        border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08); color:var(--text-1,#1c1c1e);
    }
    .menu-toggle i{ font-size:22px; }
    .app{ display:block !important; }
    .sidebar{
        position:fixed !important; top:0; left:0; height:100vh !important; width:260px;
        flex-direction:column !important; transform:translateX(-100%);
        transition:transform .22s var(--ease,ease); z-index:1001; overflow-y:auto;
    }
    .sidebar.open{ transform:translateX(0); }
    .sb-foot{ display:flex !important; }
    .sb-section{ display:block !important; }
    .menu-overlay.show{
        display:block; position:fixed; inset:0; background:rgba(0,0,0,.4);
        backdrop-filter:blur(2px); z-index:1000;
    }
    .main{ padding-top:64px !important; }
}

/* ---------- Campos de formulario ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--text-2,#6e6e73); margin-bottom:6px; }
.input,.select,textarea.input{
    width:100%; padding:10px 12px; border:1px solid var(--border-medium,#d1d1d6);
    border-radius:var(--r-md,12px); font:inherit; font-size:14px; background:var(--bg-card,#fff);
    color:var(--text-1,#1c1c1e); transition:border-color .15s, box-shadow .15s;
}
.select{ -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AEAEB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
.input:focus,.select:focus,textarea.input:focus{ outline:none; border-color:var(--accent,#30b07a);
    box-shadow:0 0 0 4px var(--accent-light,#e6f7ee); }
.input:disabled{ background:var(--bg-secondary,#f9f9fb); color:var(--text-3,#aeaeb2); }

/* ---------- Modal de cita (form grid sobre el modal de Jon) ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } }
.modal-error{ background:var(--danger-bg,#ffedeb); color:var(--danger,#c7281f);
    border-radius:var(--r-md,12px); padding:10px 13px; font-size:13px; font-weight:600; margin-bottom:14px; }

/* Acciones en filas de tabla */
td.acciones{ white-space:nowrap; text-align:right; }
td.acciones .btn{ margin-left:4px; }

/* ---------- Editor de configuración ---------- */
.cfg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cfg-hint{ font-size:12.5px; color:var(--text-2,#6e6e73); margin-bottom:14px; }
.cfg-msg{ position:sticky; top:12px; z-index:30; padding:11px 14px; border-radius:var(--r-md,12px);
    font-weight:600; font-size:13px; margin-bottom:16px; }
.cfg-ok{ background:var(--accent-light,#e6f7ee); color:#1a6e47; }
.cfg-ko{ background:var(--danger-bg,#ffedeb); color:#c7281f; }
.card-pad{ padding:20px; }

.chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; cursor:pointer; color:var(--text-1,#1c1c1e); }
.chk input{ accent-color:var(--accent,#30b07a); width:16px; height:16px; }

.srv-row{ display:grid; grid-template-columns:1.2fr 2fr 1fr 1fr 40px; gap:10px; align-items:center; margin-bottom:8px; }
.srv-row.srv-head{ font-size:11px; font-weight:700; color:var(--text-3,#aeaeb2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.srv-del,.emp-del,.cer-del,.blo-del{ color:var(--text-3,#aeaeb2); }
.srv-del:hover,.emp-del:hover,.cer-del:hover,.blo-del:hover{ color:var(--danger,#ff453a); background:var(--danger-bg,#ffedeb); }

.emp-card{ border:1px solid var(--border-light,#e5e5ea); border-radius:var(--r-md,12px); padding:14px; margin-bottom:12px; background:var(--bg-secondary,#f9f9fb); }
.emp-top{ display:grid; grid-template-columns:1fr 2fr auto 40px; gap:10px; align-items:center; }
.emp-servs{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; padding:10px 0; border-top:1px dashed var(--border-light,#e5e5ea); }
.emp-hp{ margin-bottom:8px; }

.day-row{ display:grid; grid-template-columns:90px 110px 1fr 14px 1fr; gap:10px; align-items:center; margin-bottom:7px; max-width:520px; }
.day-name{ font-weight:600; font-size:13px; }

.cer-row{ display:grid; grid-template-columns:1fr 22px 1fr 1.4fr 40px; gap:10px; align-items:center; margin-bottom:8px; }
.blo-row{ display:grid; grid-template-columns:1.1fr 1fr 14px 1fr 1.1fr 1.4fr 40px; gap:8px; align-items:center; margin-bottom:8px; }
.cer-row.cer-head,.blo-row.blo-head{ font-size:11px; font-weight:700; color:var(--text-3,#aeaeb2); text-transform:uppercase; letter-spacing:.04em; }
.reglas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 18px; }

@media (max-width:760px){
    .srv-row,.emp-top,.cer-row,.blo-row{ grid-template-columns:1fr 1fr; }
    .srv-row.srv-head,.cer-row.cer-head,.blo-row.blo-head{ display:none; }
    .day-row{ grid-template-columns:70px auto 1fr 10px 1fr; }
}

/* ---------- Barra del kiosko embebido ---------- */
.kiosko-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.kiosko-bar-info{ display:flex; align-items:center; gap:10px; flex:1; min-width:260px; }
.kiosko-bar-label{ font-size:12.5px; color:var(--text-2,#6e6e73); font-weight:600; white-space:nowrap; }
.kiosko-bar-url{ flex:1; min-width:200px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; }

/* ---------- Diagnóstico (estado.php) ---------- */
.diag{ display:flex; gap:10px; flex-wrap:wrap; }
.diag-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
    font-size:13px; font-weight:600; border:1px solid var(--border-light,#e5e5ea); background:var(--bg-card,#fff); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--text-3,#aeaeb2); }
.dot.ok{ background:var(--accent,#30b07a); }
.dot.ko{ background:var(--danger,#ff453a); }

/* ---------- Login ---------- */
.login-page{ min-height:100vh; display:grid; place-items:center; background:var(--sidebar,#0f1117); padding:20px; }
.login-card{ width:100%; max-width:380px; background:var(--bg-card,#fff); border-radius:var(--r-lg,16px);
    box-shadow:0 24px 60px rgba(0,0,0,.35); padding:32px 30px; }
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.login-logo{ width:46px; height:46px; border-radius:12px; background:var(--accent,#30b07a); color:#fff;
    display:grid; place-items:center; font-size:24px; }
.login-brand h1{ font-size:18px; font-weight:800; color:var(--text-1,#1c1c1e); }
.login-brand p{ font-size:12.5px; color:var(--text-2,#6e6e73); }
.login-card .btn{ width:100%; justify-content:center; padding:12px; margin-top:6px; }
.login-error{ background:var(--danger-bg,#ffedeb); color:var(--danger,#c7281f); border-radius:var(--r-md,12px);
    padding:10px 12px; font-size:13px; font-weight:600; margin-bottom:16px; }

/* El tema de Jon pone los textarea del modal a 220px; el de notas no lo necesita */
.modal-body textarea.input{ min-height:64px; }

/* ==========================================================
   Tabla de Citas con edición en línea — layout sin recortes
   ========================================================== */
#citas-zona{ overflow-x:auto; }                 /* scroll horizontal si la fila no cabe */

.tbl-editable{ table-layout:auto; width:max-content; min-width:100%; }
.tbl-editable th,
.tbl-editable td{ white-space:nowrap; vertical-align:middle; }
.tbl-editable td{ padding:7px 10px; }
.tbl-editable thead th{ padding:12px 10px; }

/* Celdas editables: parecen texto, revelan borde al pasar/enfocar */
.cell-edit{
    width:100%; font:inherit; font-size:13.5px; color:var(--text-1,#1c1c1e);
    background:transparent; border:1.5px solid transparent; border-radius:9px;
    padding:8px 9px; transition:border-color .12s, background .12s, box-shadow .12s;
}
.cell-edit:hover{ border-color:var(--border-light,#e5e5ea); background:var(--bg-card,#fff); }
.cell-edit:focus{ outline:none; border-color:var(--accent,#30b07a); background:#fff;
    box-shadow:0 0 0 3px var(--accent-light,#e6f7ee); }

/* Anchos mínimos por columna para que NUNCA se recorte el contenido */
.cell-edit[type="date"]{ min-width:150px; }
.cell-edit[type="time"]{ min-width:118px; }
.cell-edit[data-field="cliente"]{ min-width:150px; }
.cell-edit[data-field="telefono"]{ min-width:130px; }
.cell-edit[data-field="servicio"]{ min-width:205px; }
.cell-edit[data-field="profesional"]{ min-width:130px; }
.cell-precio{ min-width:92px; max-width:110px; text-align:right; }

/* Selects: sin apariencia nativa + flecha propia */
select.cell-edit{
    -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:28px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 9px center;
}

/* Estado como pastilla de color */
.cell-edit-estado{ min-width:138px; font-weight:700; border-radius:999px; }
.cell-edit-estado.estado-confirmada{ background:var(--accent-light,#e6f7ee); color:#1a6e47; }
.cell-edit-estado.estado-pendiente { background:#fff3d6; color:#9a6700; }
.cell-edit-estado.estado-cancelada { background:var(--danger-bg,#ffedeb); color:#c7281f; }
.cell-edit-estado:hover{ box-shadow:none; filter:brightness(.97); border-color:transparent; }
.cell-edit-estado:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.06); }

/* Columna de acciones + indicador de guardado por fila.
   OJO: en style.css ponen .acciones{display:flex}, lo que rompe la celda
   y descuadra el borde inferior. Forzamos celda de tabla normal. */
.tbl-editable td.acciones{ display:table-cell !important; vertical-align:middle; text-align:right; white-space:nowrap; }
.tbl-editable td.acciones .btn-icon{ vertical-align:middle; margin-left:4px; }
.tbl-editable td.acciones .row-status{ vertical-align:middle; }
.row-status{ display:none; }
.row-status.show{ display:inline-flex; align-items:center; margin-right:6px; vertical-align:middle; font-size:15px; }
.row-status.saving{ color:var(--text-3,#aeaeb2); }
.row-status.ok{ color:var(--accent,#30b07a); }
.row-status.error{ color:var(--danger,#ff453a); }
.row-status .ti-loader-2{ animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Filas: un poco de aire y separador suave */
.tbl-editable tbody tr.row-cita td{ border-bottom:1px solid var(--border-light,#e5e5ea); }
.tbl-editable tbody tr.row-cita:hover td{ background:var(--bg-secondary,#f9f9fb); }

/* ============================================================
   AÑADIR AL FINAL de panel-extra.css
   Cabeceras ordenables + filtro por día + Powered by Nubip
   v2026-06-02
   ============================================================ */

/* --- Cabeceras ordenables: pista visual de que se puede ordenar --- */
.tbl-editable thead th.th-sort{
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.tbl-editable thead th.th-sort:hover{ color:#16a34a; }
.tbl-editable .th-arrow{
  font-size:11px;
  opacity:.30;          /* tenue = "se puede ordenar" */
  margin-left:3px;
  transition:opacity .15s ease;
}
.tbl-editable thead th.th-sort:hover .th-arrow{ opacity:.6; }
.tbl-editable .th-arrow.on{       /* columna activa */
  opacity:1;
  color:#16a34a;
  font-weight:700;
}

/* --- Filtro por día concreto (input date en la barra) --- */
.toolbar .filter-date{
  min-width:160px;
}

/* --- Powered by Nubip (logo) --- */
.powered-nubip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 10px;
  margin-top:8px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:12px;
  color:#8a94a6;
}
.powered-nubip a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  opacity:.85;
  transition:opacity .15s ease;
}
.powered-nubip a:hover{ opacity:1; }
.powered-nubip img{
  height:18px;
  width:auto;
  display:block;
}