/* Técnica Delta: a made-up repair company's web app. Plain, a little old-fashioned. Not Garanplus's look. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid #F2A900;outline-offset:1px}
svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;flex:none}
body.td{font-family:Tahoma,Verdana,"Segoe UI",sans-serif;font-size:13px;color:#1D2633;background:#D9DEE5;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* Test-mode switch: a small strip, plainly not part of the company's app. */
.td-test{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 14px;background:#FFF6D6;border-bottom:1px solid #E8D58A;font-size:12px;color:#5C4A00;flex:none}
.td-test button{font:bold 12px Tahoma,Verdana,sans-serif;min-height:24px;padding:0 10px;border:1px solid #C9B25A;border-radius:3px;background:#FFFFFF;color:#5C4A00;cursor:pointer}
.td-test button[aria-pressed="true"]{background:#5C4A00;border-color:#5C4A00;color:#FFFFFF}

/* Header and menu */
.td-top{height:48px;background:#26406A;border-bottom:3px solid #F2A900;color:#FFFFFF;display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;flex:none;position:relative}
.td-logo{font:bold 14px Tahoma,Verdana,sans-serif;letter-spacing:.04em;white-space:nowrap}
.td-logo small{display:none;font-weight:normal;font-size:12px;letter-spacing:0;opacity:.85;margin-left:6px}
.td-user{display:none}
.td-here{margin-left:auto;font-size:12px}
.td-burger summary{list-style:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:3px}
.td-burger summary::-webkit-details-marker{display:none}
.td-burger[open] summary{background:rgba(255,255,255,.12)}
.td-drop{position:absolute;left:4px;top:48px;z-index:10;min-width:200px;background:#FFFFFF;border:1px solid #A9B4C2;box-shadow:0 4px 12px rgba(0,0,0,.18);display:flex;flex-direction:column}
.td-drop a{padding:12px 14px;color:#26406A;text-decoration:none;border-top:1px solid #EEF1F5;font-size:14px}
.td-drop a:first-child{border-top:0}
.td-drop a[aria-current="page"]{font-weight:bold;color:#1D2633;background:#EEF1F5}
.td-menu{display:none}

/* Content */
.td-body{flex:1;display:flex;flex-direction:column;min-height:0}
.td-frame{flex:1;background:#FFFFFF;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.td-status{display:none}
.gp-host{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.gp-frame{flex:1;width:100%;height:100%;border:0;display:block}
.gp-loading{margin:auto;color:#4A5568}
.gp-error{margin:24px auto;max-width:420px;padding:16px;border:1px solid #D9A2A2;background:#FFF4F4;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gp-error small{color:#4A5568}
.td-button{font:bold 13px Tahoma,Verdana,sans-serif;min-height:32px;padding:0 14px;border:1px solid #1C3253;border-radius:3px;background:#26406A;color:#FFFFFF;cursor:pointer}
.td-button:hover{background:#1C3253}
.td-empty{margin:auto;padding:24px;text-align:center;display:flex;flex-direction:column;gap:10px;color:#4A5568}
.td-empty p{margin:0}
.td-empty a{color:#26406A;font-weight:bold}

/* Computer: the menu as tabs, the content in a bordered frame, a status bar. */
@media (min-width:900px){
  .td-test{padding:4px 14px}
  .td-top{height:44px;gap:14px;padding:0 14px}
  .td-burger,.td-here{display:none}
  .td-logo{font-size:16px}
  .td-logo small{display:inline}
  .td-user{display:block;margin-left:auto;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .td-menu{height:32px;background:#EEF1F5;border-bottom:1px solid #A9B4C2;display:flex;align-items:flex-end;padding:0 10px;gap:2px;flex:none}
  .td-menu a{padding:7px 14px;border:1px solid transparent;border-bottom:0;font-size:12.5px;color:#26406A;text-decoration:none}
  .td-menu a:hover{text-decoration:underline}
  .td-menu a.on{background:#FFFFFF;border-color:#A9B4C2;font-weight:bold;color:#1D2633;margin-bottom:-1px;padding-bottom:8px}
  .td-menu a.on:hover{text-decoration:none}
  .td-body{padding:10px}
  .td-frame{border:1px solid #A9B4C2}
  .td-status{height:22px;background:#EEF1F5;border-top:1px solid #A9B4C2;font-size:11px;color:#4A5568;display:flex;align-items:center;gap:16px;padding:0 10px;flex:none}
}