/* ==========================================================================
   Estilo común de las apps internas de Drotapp (Recibos, Uniformes, Empresas…).
   Lo agrega solo el middleware TemaPaginasMiddleware a las páginas que no tienen
   diseño propio. Solo retoca formas (bordes, campos, botones, tablas): no cambia
   la estructura de cada página.
   ========================================================================== */
:root{
  --app-radio: 16px;
  --app-radio-ctrl: 10px;
  --app-borde: #d1d5db;
  --app-foco: rgba(37, 99, 235, .22);
  --app-sombra: 0 4px 18px rgba(15, 23, 42, .08);
}

html{ -webkit-font-smoothing: antialiased; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ── Tarjetas y contenedores ─────────────────────────────────────────── */
form, .container, #container, section, .resultados-container, .modal-content, .modal-box,
.categoria, .recibo-item, .datos-container, .visualizar-datos-container, .document-section,
.password-container, .messages-container, .error-container, .legend-box, .recibos-container,
.help-text, .content-wrapper{
  border-radius: var(--app-radio) !important;
}
.container, #container, .modal-content, .modal-box, .resultados-container{
  box-shadow: var(--app-sombra);
}
/* Un formulario dentro de una tarjeta no repite la sombra */
.container form, #container form, section form, .modal-content form{ box-shadow: none; }

/* ── Campos ──────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]),
select, textarea{
  border-radius: var(--app-radio-ctrl) !important;
  border: 1px solid var(--app-borde);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px var(--app-foco) !important;
}
input[type=file]{ border-radius: var(--app-radio-ctrl) !important; }
input[type=file]::file-selector-button{
  border: 1px solid var(--app-borde); border-radius: 8px; background: #f3f4f6;
  padding: 6px 12px; margin-right: 10px; cursor: pointer; font: inherit;
}
input[type=checkbox], input[type=radio]{ accent-color: #16a34a; }

/* ── Botones ─────────────────────────────────────────────────────────── */
button, input[type=submit], input[type=button], input[type=reset], .btn, .button, a.btn{
  border-radius: var(--app-radio-ctrl) !important;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s, transform .06s, box-shadow .15s;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, .btn:hover{ filter: brightness(1.06); }
button:active, input[type=submit]:active, input[type=button]:active, .btn:active{ transform: translateY(1px); }

/* ── Tablas ──────────────────────────────────────────────────────────── */
table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px;
  overflow: hidden;
}

/* ── Mensajes ────────────────────────────────────────────────────────── */
.messages li, .alert, .messages div{ border-radius: var(--app-radio-ctrl); }

/* ── Imágenes de perfil y vistas previas ─────────────────────────────── */
img.preview, .preview img, .document-section img{ border-radius: 12px; }

/* ── Teléfono: las tablas anchas se deslizan de costado dentro de su cuadro (la página no se corre) ── */
@media (max-width: 700px){
  html, body{ max-width:100%; overflow-x:hidden }
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
  img, video, canvas{ max-width:100% }
}