:root{--az:#0b5fa5;--az2:#08406f;--bg:#f4f6f9;--tx:#1c2733;--gr:#e2e8f0}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--az)}
.top{background:var(--az);color:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.top .brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px}
.top nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top nav a{color:#fff;text-decoration:none;font-size:14px}
.top nav a:hover{text-decoration:underline}
.chip{background:rgba(255,255,255,.22);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px}
.who{opacity:.85;font-size:13px}
.wrap{max-width:1040px;margin:24px auto;padding:0 16px}
.card{background:#fff;border:1px solid var(--gr);border-radius:10px;padding:22px;margin-bottom:16px}
.login{max-width:400px;margin:7vh auto;text-align:center}
.login form{text-align:left}
.login-title{margin:0;font-size:22px;color:var(--az2);line-height:1.2}
.login-sub{margin:6px 0 18px;font-size:15px;font-weight:600;color:#475569}
.btn-block{width:100%;padding:12px;font-size:15px}
.login-logo{margin-top:22px;padding-top:18px;border-top:1px solid var(--gr)}
.login-logo img{max-width:230px;width:80%;height:auto}
h2{margin-top:0}
label{display:block;font-size:14px;margin:12px 0 4px;font-weight:600}
input,select{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px;font-size:16px;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.btn{display:inline-block;background:var(--az);color:#fff;border:0;padding:10px 16px;border-radius:8px;font-size:14px;cursor:pointer;text-decoration:none;line-height:1.4}
.btn:hover{background:var(--az2)}
.btn.sec{background:#fff;color:var(--az);border:1px solid var(--az)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.danger{background:#b91c1c}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.err{background:#fde8e8;color:#9b1c1c;padding:10px 12px;border-radius:8px;font-size:14px;margin:10px 0}
.ok{background:#e6f4ea;color:#166534;padding:10px 12px;border-radius:8px;font-size:14px;margin:10px 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gr);font-size:14px;vertical-align:middle}
th{background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.thumbs img{width:100%;border-radius:8px;background:#000;aspect-ratio:1;object-fit:contain}
.muted{color:#64748b;font-size:13px}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;text-transform:uppercase;letter-spacing:.04em}
.badge.doctor{background:#ecfeff;color:#155e75}
.badge.admin{background:#fef3c7;color:#92400e}

/* ====== MOBILE ====== */
@media (max-width:640px){
  .top{padding:10px 14px;gap:6px}
  .top .brand{font-size:16px}
  .top nav{width:100%;gap:8px 16px;row-gap:8px}
  .top nav a{padding:4px 0}
  .who{width:100%;order:5;font-size:12px}
  .wrap{margin:14px auto;padding:0 12px}
  .card{padding:16px}

  /* Botones mas grandes para el dedo */
  .btn{padding:12px 16px;font-size:15px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn.sm{padding:9px 14px;font-size:14px;min-height:40px}

  /* En el detalle del estudio, botones de visor a lo ancho */
  div.actions .btn{flex:1 1 100%}

  /* Miniaturas: mas chicas para que entren 3 por fila */
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}

  /* ---- Tablas como tarjetas ---- */
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  table tr{
    border:1px solid var(--gr);border-radius:10px;
    margin-bottom:10px;padding:6px 12px;background:#fff
  }
  table td{
    border:none;padding:8px 0;display:flex;gap:12px;
    align-items:center;justify-content:space-between;font-size:14px
  }
  table td::before{
    content:attr(data-label);font-weight:600;color:#64748b;
    font-size:12px;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto
  }
  table td[data-label=""]::before,
  table td.actions::before{display:none}
  table td.actions{padding-top:10px;flex-wrap:wrap;justify-content:flex-start}
  table td.actions .btn{flex:1 1 auto}
  table td.actions form{flex:1 1 auto;display:flex}
  table td.actions form .btn{width:100%}
}