:root{ --sky:#0ea5e9; --ink:#0f172a; --muted:#64748b; }
body{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.card{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; box-shadow: 0 2px 8px rgba(2,6,23,0.04); }
.card-title{ font-size:1rem; font-weight:700; color:#0f172a; margin-bottom:10px; }
.lbl{ display:block; font-size:.8rem; color:#334155; margin-bottom:6px; }
.inp{ width:100%; background:#fff; border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; font-size:.95rem; }
.btn{ background:var(--sky); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600; }
.btn:hover{ filter:brightness(0.95); }
.btn-outline{ background:#fff; color:var(--sky); border:1px solid var(--sky); }
.btn-ghost{ background:transparent; color:#0f172a; border:1px dashed #cbd5e1; }
.btn-xs{ padding:6px 8px; font-size:.8rem; }
.chip{ background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:6px 12px; font-size:.85rem; }
.chip:active{ transform:scale(.98); }

/* Responsive button layout for mobile */
@media (max-width: 768px) {
  .config-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .config-buttons .btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Ajustar el espaciado en móviles */
  .card {
    padding: 12px;
  }
  
  /* Mejorar el espaciado entre secciones */
  .space-y-6 > * + * {
    margin-top: 1rem;
  }
  
  /* Asegurar que no haya superposición */
  .config-buttons {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

/* Para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
  .config-buttons .btn {
    padding: 14px 12px;
    font-size: 0.85rem;
    line-height: 1.2;
  }
  
  .card {
    padding: 10px;
    margin: 8px;
  }
  
  /* Ajustar el padding del main */
  main {
    padding: 8px;
  }
}

/* Estilos para la sección de historial en móviles */
@media (max-width: 768px) {
  /* Asegurar que el botón del dashboard no se superponga */
  .card .mb-3 {
    margin-bottom: 16px !important;
    padding-bottom: 8px;
  }
  
  .card .mb-3 .btn {
    width: 100% !important;
    text-align: center;
    padding: 14px 16px !important;
    font-size: 0.9rem;
    display: block !important;
    margin-bottom: 8px;
  }
  
  /* Mejorar el espaciado del historial */
  #historial {
    margin-top: 12px !important;
    padding-top: 12px !important;
    clear: both;
  }
  
  /* Asegurar que no haya superposición entre secciones */
  .card + .card {
    margin-top: 20px !important;
  }
  
  /* Forzar el layout vertical en móviles */
  .card {
    overflow: visible !important;
  }
}

/* Para pantallas muy pequeñas - historial */
@media (max-width: 480px) {
  .card .mb-3 .btn {
    padding: 14px 12px;
    font-size: 0.85rem;
    line-height: 1.2;
  }
  
  #historial {
    font-size: 0.8rem;
  }
}

/* Estilos específicos para el canvas de firma */
#pad {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  will-change: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}