<!--

 .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  . 
   .       .  .:   .       .   .S8: % %.%8;.       .     .%X;      .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .        
     .  .   :t;8 :    . .    :t:8S;%%%X%%S8X8   .    .   S8%% ;  .    . .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  . . 
 .       .8@8O%SXO  .     .@8@XSttS%t%t%tt%O ;;       . 8StS%8X8.        .      .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .          
   .  ..t8X%t%%%S8.     .X8X%t%t;tt;tt;t;tt%tO%8;: .    .8%Sttt%%;S..  .    . .    .  .    .:8t88;8t8 8;   . %t@8.8:8888%   . .   S%888.O   . .% 8888;     . .t%888t  .tt88.8 88 8;  . .8t88t8t8@S%.  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  . .  .
  .   :8X%tttttt%8: .   S8XStt;ttt;t;tttt;t;t%ttS :   . .8;%;t%t%SXX.    .      .   .   .  S O%XS%t%%tt8S   t8S%XS%%SS%%8X .    . 08SS8X8. .   S8X0%X: .      XS%S8   88X%XS%Sttt%t.  :0S%SS%t%%SS8t .   .   .  .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .       
    .O:8Xt;t;t;tS8:.  .t 8%t;tttt;tttt%;tt;tttt%;%..    .8t%tt;tt%;S8O .   .  .   .   .   S8@X%888S88X@t :S@XSO.8 X88%tt8%      S0%%X%%SS     t8tX%;X % . t@X8S%%S%  %%8%O8X. O8X8S   SXt88  S8888:   .   .      .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .    . .  
  . ;OXXt;tttttt%8:   .88St;tt;t;tt%t%;tt%t%t;t%ttS8:  ..8ttt;ttttt%;88:        .       .8SS%O;.;.:  %t.   XX;;8.::.  X8XtX0. . 8I%%S8%SXXX  . 0X%ttt;t88:%8S0%t;;8   80%%%8;..   :    .:8%%%.%:..  .: .         .         .       .       .       .       .       .       .       .       .       .    .     .
   8S%%t;Stt;t%t%8: . 8@t;t%t;t%t%t;%tt%;t;tt;t;t;8;   .8t%;t%;t;tt%;8%. .  .     . .  .OX%tS..  .   . .;8t%S8:   .    %S;8.  :A$Xt..;SSt8..  S@t;0.XStS88X%%;SttSS: %ttSX88O 8.      tS;S888 8X     .  .  .   . . .      . .     . .     . .     . .     . .     . .     . .     . .     . .     .    .   
  .8S%tttt;tt;t;X8.  .8Xt;tt;tt%tttS%;t%tt%tt%t;t;;8  . .Ot%t;%tt%t;tt; :      .  .      8t%%;   .       tS%%%% . .    %St;8. . 80;8S. 8ttS%. .%8%S8X XttS%t8 8XSt8:  88@X%%%8X@8@8.  .: 8SX;t@SS88 ;   .      .       .  .     .       .       .       .       .       .       .       .       .     .    . 
   ;%  t t t t  8; . .:8  t     ;             ;    %     t; ; ;  t t  :;   .    .    .  .Stt;8.    . . . :8X;X;       . St:8..:88tSX   SXS%%   S8%%O%.X8t%%88.8@ttS%   :..S8;  88%S80 .. .8S: 88@SXt..    .     .  .   .    .    . .     . .     . .     . .     . .     . .     . .     . .     . .   .    
  . .::.......::..    .::. :.......::...........:...  .  ...........:. . .   .     .    .X8%t@88t. .%: X. 8ttt8 8.. :8@8%t8t 888ttt@8Xt%t;tX .S8%%8O ::%8.;..8XS;80   8S;S; .:t8%%t;. :  8%. .:8%%%8   .    .        .    .   .      . .     . .     . .     . .     . .     . .     . .     . .     .   .  
                    .        .         .  .       ..   .  .          .         .     .    8X%t%%888X88%8% ;tX;%%8@8X%%%;88.  tt8%%t@t888:Ot8t%  88tO% . .:   . 8@t%S   @ S88@888X%t@S .    X0%%8888X8tt; .   .    . . .  .   .   .   .  .     .       .       .       .       .       .       .       .         .
  .  .  . . ;O8;O. .   . .     .t8S:   t8O: . .  .  .    ;8t8S:  .     . . .     . .    .  X8%%SStSSS8@8:.:S:8%SXS%S%%888t. t8%t%S       ;:St%  S8t%Ot ..  .   8XSt80  88@S%XX%%t%X:8. ;S8St%t%tXt%8 S. .   .           .       .      .     . .     . .     . .     . .     . .     . .     . .     .  . .   
    .   ;S@OXtX@8:   .    .;%8@8X%XXX@S%X88 8:      .  .88%%X88 8: .        .        .    .. %%.;  .8...  ;;.8; ;  ;8:...XXXX8         AAOS%8A 888%88   .   ..t8%888; ;.:: XX: S  8S . .. :8; %  :0 ..        .  .  .      . .     . .   .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .       . 
   .   88S%Xt%t%t:. .    . 88S%X%SSXSXX%%%tXSXO; . .  . :8S%%%;t%SS;  .  .     . .  .   . .    . .;: .   .    ..  .::   .  ::.: ..        :..;..:; .  .   .........;. .....  ....:.:    .    :. .;.      .  .        .  .  .     .  .       .    .   .   .   .   .   .   .   .   .   .   .   .   .   .  .  .    
 .   %88@S;tt;ttt;     . %88SSttt;t;t;tt;t%%%tS8;.       8;t;tttttS8;.    .  .                ..      .   .  .  .     .         .          . .      .  . .        .      .       .   .   . .     . .     .  .  .     .    .        . .     .   .       .       .       .       .       .       .      .  .  
    X8X8ttt;tt;tt;   .  X8@%t;t;ttt;t;tt;t;tStSS8t . . :8%%ttt;%S%SS8t .        . . .  .  .    .  .   .         .  .    .  . .  .        . . .  .         . .  .  . . .  .  .    . .    .    .      . .         .     .    . .  .     .  .       . .     . .     . .     . .     . .     . .     .  .     .
  .X8SXt;ttt;tt;tt .   S8XS%t%ttt%;tt%tt%tttt;tS%%S.     8;t;;tt;tt%%%S.   .  .          .   .   .   .   .  .  .   .   .          .        .   .   .  .  .       .       . .   .      .   . .   .  .      .  .    . .    .     .    .   .   . .  .    .  .    .  .    .  .    .  .    .  .    .  .      .   
  .8XSt;ttttt%ttt;   ..8@X%%t;t;t;tt%tt%;t%t%tt;t%X8.  .:8%tttt%t;%tt%X8..     .  .  .     .   .   . .;S@88888Xt.    .   . .  . .S88888%8888888888888X:     . .     .  .   S888888888.  .     .   . .8888X8X8. .      .    .     . :8@8@8@8;        .   .;S@8888Xt:    .    .       . .;S@8888Xt:   .  .  . 
  8SXttt%;t;t;t;%;    88O%t;tt;tt%tt%t%tt%t%;tt%t;t8%    8;t;t%;t%;tt;;8%   .         .  .   .  .S;88;8X%%%;t%%88.8 8. .         88;t;ttt;t;ttttt%t%%88tt X     .    .    88X;%;;;;t8t.   . .   .   :88:;tt%%8X .   .   .    .    8SSt;;;;;;  .  .  t%;888St;;;ttS;%.;tX.     . . %t8888%t;;;t%S88  .S.     
 . %;t%;ttt%tt%tt; . . Stt;t;ttS%tt%t%;tt%t;tt%t;t;8  . :8%%ttt%tt%t;t;OO  .   .  . .          % 88%%X%Xt%ttt%t%t%XSSS8 8. . . .  S:%%%%%%t%%%%%%%%%%%%tSSSX88; .  .    . 888%t%%%%%;tt% .           :8St%t%;;%8:. .       .   . t8X%tttt;ttX..    88SSSSStt;ttt;t;;X@SS%8%t.    8%;XS%Xtttttt;tttSX%%%8S;.  
 .%t%t;t;t%;t%;tt;     %%;tttS%;tt%t;ttS%;tt%tt%t;%8O  . 8tt;t%tt%tt%t%8O.  .        . .  . .888;X%tt%tt;ttt;ttt%%%%;%t8;       .8S%t;tt;t;t;tt;tt;t;%%%%%;%S8;     .    88tt;tt;ttttSS.   .  .  . ..8%t;t;tt%tt ;    . .   .  t.8@t;t;tt;;8.   .XXtXtttt;tt;t;tttt%S%t;t8;    tX@St%;t;t;;t;t;t%S%%t;%::.   
  ;%t;ttt%tt%tt%tt  ..t%tt;t%;ttSttt%t%;ttS%tt%;tt;S;.  ;OS%tt%tt%t%t;:St      .  .        . @%%;ttt;tt8@888S@tttttt%%tX%; .  . XSS;t;%t%XS8XS8XS8%t;t;t;tt;88. .     .:8Sttt;tt;ttt%X8;      .    .8%ttt;t;t;t8S .     .   888X;tt;t;tt;S. . 88t%;tt;t%8;8.8.888ttt;S8t  . 88S;t;tt;%;t8 88:88ttttSX; .  
  %8tt;t%tt%tt%tt;    t8%tttt%t%;tt%ttt%t%;tt%tt%;; : .  8:tt%;t%t;tt%t : .  .      .  . .:8S@ttttt%88tS.     %XS8%t;t;%%t8t .  .%:ttt%ttt. ... ...%88Xt%t;tt;8;.  .   8X%t%;ttS8:t;t;;8t . .     . :8S%t;tt;ttt%t8:.       t88%%t;t;ttt;t;8.  :8Xttt;t%%X ....   .8 %8%:.   ;;;%t;t;S;S.   :   .8 :88;.    
   .t%ttt%tt%t;%tt.  .. %%tt%t;ttt%ttS%tt;%t%;t%tt8S.   :8%%ttt%tt%t%t8;.      .  .        SXt;t%t;tS..        .  8t%t%tt;%8.   .8%%tt%t%8          . .%;tt;t:SS  .  .t8Xttttt@8tttt;tt;;:    .     ..XS;tt%t;ttt%t% ; .  .;.8Xt;tt%tt%;t;t8.  %88ttt;tt:  .       .      .  S88ttt%t.  .        ..    .  . 
   ;8;;t%;t%;t%tt;    .;8;t;tt%tS%;t%;;tS%tt%tt%;XO .    8tttt%tt%t;%OS  .  .       . .  %8t%t;t;t t.   .        .;t%t;tt%%88. . XSSt%t;t8.  .  . .   ;8tttt;tt :    .88%;tt;tt.:8ttt;tttt.    .  .: 0ttt%;tt%;tt;;%8S   888Xtttt;tt%tt%t;S..  ttt;ttt@8;          .      . :%;%t;tt88:                .   
  ..; Xtttt%tt%ttt.  . .: Xtt%t%;ttt%tt%;tt%;t%tt8   . .;OS%;tt%;tt%;8.       . .         XS;tt;t;.           .  . .Xt%t;t;;8:  .%:tt;t%;8..         . :X%t;tt; :.  . 8Xttt;tS;..S8;%t;t%S:  .       0X%t;ttStXt;ttt%t8:S@8%%;tt;t88.;t%t;;8.    S%t;t;;%88;  888S:  .  .    .;%S;tt;t%88X  888%:     .     
    ..88%t%tt%;tt;      ..88%tt;ttS%;tt%tt%tttS8t  .     8;;tt%tt%X8;  .  .       . .  . 8t%t%tt%  . . .  .    .  . 8@t;ttt;8    8S%tt%t::   . .  .   888;%tt%t:  . 88%;%ttt88  . 8t;tttt;8; .  . . :8S%%tt%t:8%t;ttt%;%8XStttt%t888%tt;t%tS. ..t8ttS;tt%;SSXX%%%88S8S.  .    t8;%%tt%t%SXXX%%S8:%8S     .  
   . . . 8t%ttt%tt .  .  . : 8t%t%;ttS%tt%;S88%:     .  :8S%;ttS88X.    .   .  .      . :8%%t;t%S8:      .  .       t8t%t%;tSS. . t%tt%t;8.        .S 8S;ttt%t8;.  t8Sttt;tS :.  .t8t%;t;tt8t       .88;tt;%t.:8S;tt;ttt;%ttt;tt ;:8tttt%t;8.  . %8%tt;t%%tt%%%%%tSS%88 S . . .;8t;t;tt%%t%%%%%%Xt%88 S .   
       .  tSt88;OX.      . .. %%S888888::8 8t.   .  .    8t8.0:8 .  . .      .   .  .    8t%;tt%%8: .  .      . . . ;%S%;tt;8;  :Xt%t%;t:X;X 8:888888XStttt;tXX.  :88;t;tt%8%   . .t8;%%ttt%%. .  . .8%t;t%tt...: Xtt;tttttt;t8;  .8t;tt%t;S .   ::S.888%;tt;t;tt%S%%S%%8X;    ::S 888tt;tt;tttS%tt;SS8 t . 
  .  .     ..: :  . .  .   .  . .t      .:.. .    .   . .:   .          . .             :8;ttt%t; .   .   . .      .88X;t;ttt;   8SS;tt;%%%XSSXSSSXS%%;t;t;%S .   :8%t;t;%8X .    . 8%t;ttt%S8:    .. X%tt;tt:. . 8Xttt%t;t;tS;    8t%t%;t;8.  .    .. %%S8;8S%tt;t;tt%%t%%. .  . .: StX 8X@St;t;tt%%%;St   
      .   .  .       .   .     .         .     .       .     ..  .  .       .  .  .  .  . t%tt%t;8 ..          .   . ttttt%;8;. . t%tt%t;t%%%tSSS%tt;t;tttS%:.   88t%;tt%t.         %8S%;tt;;8;. .  :8S%%tt%t. . . 8;%%tt;%X88. . :8ttt;t;t8.    . .       ..t@::8t%tttS%X8. .            t8;:88;%%ttt%;8  
   ..:::;:::::::. .    ..::::::.:::.....::::::.:::. .   . ..:::::::::: . .          .  ..S8:%%;t;S8S   .  .  .   .. 8%t;t%tS8:  :X%%t%;tt%ttttt;t%t;tt%8tS8;   .%8S%tt%t;%SXSXSSSXXS;Sttt;%t;%8X    .:XStt%;t:   .  .;8;t%t;;..   .8%ttt%t;S. .    .  . .      . .  tt;ttt;X    .. . .  . .    :  ;t;t;tt : 
 . :88@X@8@8X@888S  . 8888@888@8@8@88@8@8888@8@8@8 : .  ;88@888X8XX@88   .  . .         XX;tt;tt%8.S          ;t88St;tt;X ;    SSS;tt%tt.:;;;;;;;tX8S  ..  . t88%t%;tt%t%S%S%%%%%tttt;t%;tt;t8; . :8@t;tttt.  .   . ;;8X%     . :8ttt%t;;8.   .: 8t8%.    .  .  . t%t;t;t ; .;;8X8%      .   .;8S%t;t;; ..
   8@StX%XStXSX%X8 .  8XS;S%%XX;%%OS%XSO%tX%X%;S%tX8    .8SXS@SX%t%%XSX% .        .  .  .   t;t%tttt%8 8t  . .X 88ttt;ttSt8;  . . %%tt%;;;.         ..     .   00;t;ttt%t;t;t;tttt;t;t;tt%t;tttSX  .  X%t;t%t:.   .   .:: . . .   .8%tt;tt;S. . .888;t888;:     ;88tS;tt%t%%  .;8%%%8 t%..   .;S8XXt;tttS8: 
   %:XX%%tttt;t%X8:  :X8tttt%tt%%;tt;tt;t%tt;t%tttS : . .8Xtt;ttt%t%tS..   .  .    .       : Stt;ttS%;tS8t8.8S@SS%ttttt%%8S .   :X%%tt%tt8:.. . .  .   .  .   88St;t;tS;8888 8.8.8.888888ttt;tt%8S. :8@ttt%tt.   .                :8%ttt%t;8.  tX8X;t%tS%;88 8.88S8%t%t%tt8t %;8%t%t%%S888 8888@8%;ttt%t8;  
  . .S%t;tt;tt;t%8:    SS%ttttt;tt;tt;ttt;ttt;t;%t.%     8S%;t;t;t;t@X:  .      .     . .  ..S8Xtt%;t%tt%S%S%%%tttt;t%SS8:   .  . t%t%t;: .       .         .88%;tttt%8t: ... .. . ;. ::;8;tt;tt;:%   X%tt;tt.     . . . .  .  .  .8%tt%;t;S  ..XXSt;t%%%%;XS@SSSSttttt;;;;   ;S%t;t%%%%%X@XXtXtttttt%8;.   
     . t%t%t;tt;S8:  .   %tt;t;t;ttttt;tttt;t%ttt8%  . ..8tttt;ttttX8  .   .  .   .  .    .  . S8tttt%tt%tttttt;t;ttt;8:.  .    :Xt%;tt%t8. . . .    .  . . .88%tt%t%88.        .        %%%%t;t;X%.:8@t;tt%t: . .         .    . :8ttt;tt;8:    t8:ttt;t;t%%%Stt;t;t;%S%  ..  .8Stt;t;ttt%ttttt;tt;;8S . . 
     ..O8;%;t%tt%8:    .%%Stt;t%t;tt;tt%;t;tt;tt%8.      8%tt;t%t%88 . . .      .       .     ..:8 888Xttttt;tt%8X8X8;.      .  .SSStt%;: .  .     .   .     8St;tt;% .    .  .   .      :8:%tt%t%X8 .00%tt%;t.      .  .      .   .8%ttt%;t8.    .:8 888X%%;tt;ttt%%  8; .       8 88@8%%ttt;tt%;t8S8;      
  .    : 8tXt;t;%8: .   . O8Sttt;t;tt%;tt;tt%%X t.  .  ..8ttttt8X%..        .      .  .    .    . ..  ;88XXX@88%::;.     .    .  S@SSXSX88:.    .    .    ..8@XSXSSX8t  .            .   :%0SX@XXS88;8@XSXSXX%  . .      .  .    .:8SSX@XXS0;     ...::   t88@8X88%. .:.        ..:;:  :%88X8X88%.:t.   .  . 
   .   ..: X8%;t@8   .    ..X8tttt%tt%t;ttS%8 t.     .  .8S%t8 t.   .  .  .   .  .       .   .         ..  ....  .  .  .   .    .      .;..   .   .     .   .      ..     . .  . . .   .  .      .;:.       .        .         .  ..     .   .     .      ...:.. .  .   .  .   . .     .......    . .       
    .      ::O. 8: .   .    .;O:88t@888@88@8% .   .      tt %;.   .     .      .    . .        . .                   .   .   .      . .     .   .   .  .      .  .  . . .     .      .   .    . .    . . .    .  . .   .  .  .     .   .        .          .      .  .       .     .           .   .  . .  .
     .  .   . ...   .    .  .   .        ::.  . .   .  . ...   .    . .    . .    .      . .       .  .  .  .  .  .        .   .  .     .  .      .      . .              .      .        . .     .        .   .         .      .    .    . .     . .    .     .      .  . .   .          .  .  .           
 .    .   .    . .    .       .           . .     .     .       . .      .      .   .  .     .  .         .     .   . . .    .   .   .        .      .       . .  .  . .    .  .   .  . .  .   .    .  .     .    .  .     .  .   .    .      . .     .    .     . .   .        .  . . .          . .  . .  


 ☕ COPYRIGHT 2025 - TODOS LOS DERECHOS RESERVADOS

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Consulta de Trámites y Gestiones | OPAMSS</title>
    <meta name="description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de construcción, urbanismo, permisos y otros servicios del Área Metropolitana de San Salvador." />
    <meta name="keywords" content="OPAMSS, trámites en línea, seguimiento trámites, permisos construcción, urbanismo San Salvador, área metropolitana, consulta trámites, permisos municipales, El Salvador" />
    <meta name="author" content="OPAMSS - Oficina de Planificación del Área Metropolitana de San Salvador" />
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
    <meta name="googlebot" content="index, follow" />
    <meta name="geo.region" content="SV-SS" />
    <meta name="geo.placename" content="San Salvador" />
    <meta name="geo.position" content="13.6929;-89.2182" />
    <meta name="ICBM" content="13.6929, -89.2182" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://tramites.opamss.org.sv/" />
    <meta property="og:title" content="Consulta de Trámites y Gestiones | OPAMSS" />
    <meta property="og:description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de forma rápida y segura." />
    <meta property="og:image" content="https://tramites.opamss.org.sv/Content/images/logo-noletras.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Logo OPAMSS - Sistema de Trámites" />
    <meta property="og:site_name" content="OPAMSS" />
    <meta property="og:locale" content="es_SV" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://tramites.opamss.org.sv/" />
    <meta name="twitter:title" content="Consulta de Trámites y Gestiones" />
    <meta name="twitter:description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de forma rápida y segura." />
    <meta name="twitter:image" content="https://tramites.opamss.org.sv/Content/images/logo-noletras.png" />
    <meta name="twitter:image:alt" content="Logo OPAMSS - Sistema de Trámites" />
    <link rel="canonical" href="https://tramites.opamss.org.sv/" />
    <link rel="alternate" hreflang="es-sv" href="https://tramites.opamss.org.sv/" />
    <link rel="alternate" hreflang="es" href="https://tramites.opamss.org.sv/" />
    <link rel="alternate" hreflang="x-default" href="https://tramites.opamss.org.sv/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/site.css?v=bdv8LdzhzEHObRTA6bZn0rDpDZpnyaYiTxQWBaiNjeg" />
    <link rel="stylesheet" href="/TrackingOpamss2025.styles.css?v=VGzpR1aGmEiOB8uBZiMFAOSSG9UhIC7yqM2-TF5jgOI" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q54F05T73M"></script>
    <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'G-Q54F05T73M'); </script>

</head>
<body>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<div class="app-container">
    <div class="container py-4">
        <div class="card">
            <div class="header">
                <img style="max-width: 170px;" src="https://tramites.opamss.org.sv/Content/images/logo-blanco2.png">
                <h4></i></h4>
                <!--div class="header-actions">
                    <button class="btn btn-light btn-sm">
                    <i class="fas fa-question-circle me-1"></i> Ayuda
                    </button>
                    <button class="btn btn-light btn-sm">
                    <i class="fas fa-user me-1"></i> Mi Cuenta
                    </button>
                    </div-->
            </div>
            <!-- Tabs de navegación -->
            <h5 class="consulta-title-gradient">Selecciona tu consulta</h5>

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button aria-controls="gestiones" aria-selected="false" class="nav-link" data-bs-target="#gestiones" data-bs-toggle="tab" id="gestiones-tab" role="tab" type="button">
                        <i class="fas fa-clipboard-list me-2"></i>Gesti&oacute;n
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button aria-controls="expedientes" aria-selected="true" class="nav-link active" data-bs-target="#expedientes" data-bs-toggle="tab" id="expedientes-tab" role="tab" type="button">
                        <i class="fas fa-folder me-2"></i>Expediente
                    </button>
                </li>
            </ul>
            <div class="custom-tabs-container d-flex justify-content-center align-items-center gap-4">
                <button id="tabBtnGestiones" type="button" class="glass-tab-card" data-bs-target="#gestiones-tab" tabindex="0">
                    <div class="icon-circle-glass mb-2">
                        <svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.9 142">
                            <defs>
                                <style>
                                    .cls-1 {
                                        fill: #001976;
                                    }
                                </style>
                            </defs>
                            <g id="Capa_1-2" data-name="Capa 1">
                                <g id="g1662">
                                    <g id="g1664">
                                        <g id="g1666">
                                            <g id="g1672">
                                                <path class="cls-1" d="M131.74,142H4.16C1.86,142,0,140.14,0,137.84v-44.37c0-2.3,1.86-4.16,4.16-4.16h44.37c1.58,0,3.02.89,3.72,2.3l4.4,8.79h22.59l4.4-8.79c.7-1.41,2.15-2.3,3.72-2.3h44.37c2.3,0,4.16,1.86,4.16,4.16v44.37c0,2.3-1.86,4.16-4.16,4.16ZM8.32,133.68h119.26v-36.05h-37.64l-4.4,8.79c-.7,1.41-2.15,2.3-3.72,2.3h-27.73c-1.58,0-3.02-.89-3.72-2.3l-4.4-8.79H8.32v36.05Z" />
                                            </g>
                                        </g>
                                    </g>
                                    <g id="g1676">
                                        <path class="cls-1" d="M81.82,125.36h-27.73c-2.3,0-4.16-1.86-4.16-4.16s1.86-4.16,4.16-4.16h27.73c2.3,0,4.16,1.86,4.16,4.16s-1.86,4.16-4.16,4.16Z" />
                                    </g>
                                    <g id="g1680">
                                        <path class="cls-1" d="M112.32,97.62c-2.3,0-4.16-1.86-4.16-4.16v-18.03h-54.08c-1.58,0-3.02-.89-3.72-2.3l-4.4-8.79h-18.23v29.12c0,2.3-1.86,4.16-4.16,4.16s-4.16-1.86-4.16-4.16v-33.28c0-2.3,1.86-4.16,4.16-4.16h24.96c1.58,0,3.02.89,3.72,2.3l4.4,8.79h55.67c2.3,0,4.16,1.86,4.16,4.16v22.19c0,2.3-1.86,4.16-4.16,4.16Z" />
                                    </g>
                                    <g id="g1684">
                                        <path class="cls-1" d="M106.78,75.44c-2.3,0-4.16-1.86-4.16-4.16v-23.57h-42.99c-1.58,0-3.02-.89-3.72-2.3l-4.4-8.79h-18.23v23.57c0,2.3-1.86,4.16-4.16,4.16s-4.16-1.86-4.16-4.16v-27.73c0-2.3,1.86-4.16,4.16-4.16h24.96c1.58,0,3.02.89,3.72,2.3l4.4,8.79h44.58c2.3,0,4.16,1.86,4.16,4.16v27.73c0,2.3-1.86,4.16-4.16,4.16Z" />
                                    </g>
                                    <g id="g1688">
                                        <g id="g1690">
                                            <g id="g1696">
                                                <path class="cls-1" d="M101.23,47.7c-2.3,0-4.16-1.86-4.16-4.16v-24.13h-31.89c-1.58,0-3.02-.89-3.72-2.3l-4.4-8.79h-18.23v24.13c0,2.3-1.86,4.16-4.16,4.16s-4.16-1.86-4.16-4.16V4.16c0-2.3,1.86-4.16,4.16-4.16h24.96c1.58,0,3.02.89,3.72,2.3l4.4,8.79h33.48c2.3,0,4.16,1.86,4.16,4.16v28.29c0,2.3-1.86,4.16-4.16,4.16Z" />
                                            </g>
                                            <g id="g1700">
                                                <path class="cls-1" d="M4.17,97.62c-.21,0-.42-.02-.64-.05-2.27-.35-3.83-2.47-3.48-4.74L11.14,20.72c.31-2.03,2.06-3.53,4.11-3.53h19.41c2.3,0,4.16,1.86,4.16,4.16s-1.86,4.16-4.16,4.16h-15.84l-10.55,68.58c-.32,2.06-2.09,3.53-4.11,3.53Z" />
                                            </g>
                                            <g id="g1704">
                                                <path class="cls-1" d="M131.73,97.62c-2.02,0-3.79-1.47-4.11-3.53l-10.55-68.58h-15.84c-2.3,0-4.16-1.86-4.16-4.16s1.86-4.16,4.16-4.16h19.41c2.05,0,3.8,1.5,4.11,3.53l11.09,72.11c.35,2.27-1.21,4.39-3.48,4.74-.21.03-.43.05-.64.05Z" />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="glass-card-title">Gestión</div>
                    <div class="glass-card-desc">Revisión de requisitos de la solicitud</div>
                </button>
                <button id="tabBtnExpedientes" type="button" class="glass-tab-card active" data-bs-target="#expedientes-tab" tabindex="0">
                    <div class="icon-circle-glass mb-2">
                        <svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.81 142">
                            <defs>
                                <style>
                                    .cls-1 {
                                        fill: #001976;
                                        height: 3rem;
                                    }
                                </style>
                            </defs>
                            <g id="Capa_1-2" data-name="Capa 1">
                                <g>
                                    <path class="cls-1" d="M97.73,17.82h-4.75v-4.75c0-7.21-5.86-13.07-13.07-13.07H30.9c-1.1,0-2.16.44-2.94,1.22L1.22,27.95c-.78.78-1.22,1.84-1.22,2.94v80.21c0,7.21,5.86,13.07,13.07,13.07h4.75v4.75c0,3.49,1.36,6.78,3.83,9.24,2.47,2.47,5.75,3.83,9.24,3.83h66.84c7.21,0,13.07-5.86,13.07-13.07V30.9c0-7.21-5.86-13.07-13.07-13.07ZM31.19,9.75v16.69c0,2.62-2.13,4.75-4.75,4.75H9.75L31.19,9.75ZM8.32,111.1V39.51h18.12c7.21,0,13.07-5.86,13.07-13.07V8.32h40.4c2.62,0,4.75,2.13,4.75,4.75v98.03c0,2.62-2.13,4.75-4.75,4.75H13.07c-2.62,0-4.75-2.13-4.75-4.75ZM102.49,128.93c0,2.62-2.13,4.75-4.75,4.75H30.9c-1.27,0-2.46-.49-3.36-1.39-.9-.9-1.39-2.09-1.39-3.36v-4.75h53.77c7.21,0,13.07-5.86,13.07-13.07V26.14h4.75c2.62,0,4.75,2.13,4.75,4.75v98.03Z" />
                                    <path class="cls-1" d="M26.44,61.79h40.1c2.3,0,4.16-1.86,4.16-4.16s-1.86-4.16-4.16-4.16H26.44c-2.3,0-4.16,1.86-4.16,4.16s1.86,4.16,4.16,4.16Z" />
                                    <path class="cls-1" d="M26.44,79.62h40.1c2.3,0,4.16-1.86,4.16-4.16s-1.86-4.16-4.16-4.16H26.44c-2.3,0-4.16,1.86-4.16,4.16s1.86,4.16,4.16,4.16Z" />
                                    <path class="cls-1" d="M26.44,97.44h22.28c2.3,0,4.16-1.86,4.16-4.16s-1.86-4.16-4.16-4.16h-22.28c-2.3,0-4.16,1.86-4.16,4.16s1.86,4.16,4.16,4.16Z" />
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="glass-card-title">Expediente</div>
                    <div class="glass-card-desc">Trámite en análisis</div>
                </button>
            </div>


            <!-- Contenido de las pestañas -->
            <div class="tab-content" id="myTabContent">
                <!-- Pestaña de Gestiones -->
                <div aria-labelledby="gestiones-tab" class="tab-pane fade" id="gestiones" role="tabpanel">
                    <div class="main-content">
                        <div class="section-description">
                            <strong>Gestiones OPAMSS</strong>
                            <p>Procedimiento de evaluación de requisitos para determinar la admisibilidad de las solicitudes presentadas ante la OPAMSS.</p>
                        </div>
                        <!-- Filtros mejorados -->
                        <div class="filter-container">
                            <div class="filter-header">
                                <i class="fas fa-search"></i>
                                <span>Buscar Gestión</span>
                                <button aria-controls="searchFormGestiones" aria-expanded="true" class="filter-toggle-btn" data-bs-target="#searchFormGestiones" data-bs-toggle="collapse" type="button">
                                    <i class="fas fa-minus"></i>
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <div class="collapse show filter-body" id="searchFormGestiones">
                                <div class="col-md-12 mb-3">
                                    <div class="form-check custom-checkbox">
                                        <div class="checkbox-container">
                                            <input class="form-check-input" id="esTramitadorGestion" type="checkbox" />
                                            <label for="esTramitadorGestion" class="form-check-label">B&uacute;squeda por documento identidad (Propietarios)</label>
                                            <div class="info-icon-wrapper">
                                                <svg class="info-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                                                    <path d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                                </svg>
                                                <div class="custom-tooltip">
                                                    <div class="tooltip-content">
                                                        <div class="tooltip-header">
                                                            <svg class="tooltip-icon" viewBox="0 0 24 24" fill="none">
                                                                <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                                            </svg>
                                                            Búsqueda Inteligente
                                                        </div>
                                                        <div class="tooltip-body">
                                                            Esta opci&oacute;n habilita la b&uacute;squeda por coincidencias seg&uacute;n el documento ingresado, as&iacute; facilitando
                                                            la identificaci&oacute;n de cu&aacute;l gesti&oacute;n seleccionar y consultar.
                                                        </div>
                                                    </div>
                                                    <div class="tooltip-arrow"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div class="row compact-form">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="numGestion">Número de gestión</label>
                                            <input class="form-control" id="numGestion" placeholder="Ingrese el número de gestión" type="text" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="numDocumentoGestion">Número de documento de identidad</label>
                                            <input class="form-control" id="numDocumentoGestion" placeholder="Ingrese el número de documento de identidad" type="text" />
                                            <div class="form-help-text">Registro o número de DUI, pasaporte, NIT o carnet de residente</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-footer">
                                    <button class="btn btn-outline-secondary" id="limpiarGestion" type="button">
                                        <i class="fas fa-times me-1"></i>Limpiar
                                    </button>
                                    <button class="btn btn-primary" id="buscarGestion" type="button">
                                        <i class="fas fa-search me-1"></i>Buscar
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Mensaje de no resultados -->
                        <div class="results-table-container mt-4" id="resultadosMultiplesGestiones" style="display: none;"><div class="section-title-modern mb-4"><h5 class="m-0"><i class="fas fa-list-ul me-2"></i>Resultados de la búsqueda</h5></div><div class="table-responsive"><table class="table table-hover dt-responsive nowrap w-100 border-0 modern-table" id="tablaResultadosGestiones"><thead><tr><th>NO. GESTIÓN</th><th>ESTADO</th><th>PROYECTO</th><th>ACCIÓN</th></tr></thead><tbody id="resultadosTablaGestiones"></tbody></table></div></div><div class="no-results" id="noResultsGestiones">
                            <i class="fas fa-search"></i>
                            <h5>No se encontraron resultados</h5>
                            <p>No se encontró información para los criterios de búsqueda ingresados. Por favor, verifique los datos e intente nuevamente.</p>
                        </div>
                        <!-- Detalles de la gestión (inicialmente oculto) -->
                        <div class="details-container" id="detallesGestion">
                            <div class="d-flex justify-content-end mb-"><button class="btn btn-outline-primary btn-sm back-button" id="volverAResultadosGestion" style="display:none;" type="button"><i class="fas fa-arrow-left me-2"></i>Volver a resultados</button></div>
                            <!-- Resumen de información -->
                            <div class="summary-row" style="display: flex; flex-wrap: wrap; width: 100%; gap: 1rem;">
                                <div class="summary-card" style="flex: 1 1 calc(50% - 0.5rem); display: flex; align-items: center; padding: 1rem; background: #fff; border-radius: 8px;">
                                    <div class="summary-icon primary" style="margin-right: 1rem; font-size: 1.8rem; color: #007bff;">
                                        <i class="fas fa-clipboard-list"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title" style="font-weight: 600; color: #6c757d;">Número de Gestión</div>
                                        <div class="summary-value" style="font-weight: bold; color: #212529;">GES-2025-0157</div>
                                    </div>
                                </div>

                                <div class="summary-card" style="flex: 1 1 calc(50% - 0.5rem); display: flex; align-items: center; padding: 1rem; background: #fff; border-radius: 8px;">
                                    <div class="summary-icon warning" style="margin-right: 1rem; font-size: 1.8rem; color: #e3342f;">
                                        <i class="fas fa-hourglass-half"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title" style="font-weight: 600; color: #6c757d;">Fecha de Consulta</div>
                                        <div id="dia-hoy-2" class="summary-values" style="font-weight: bold; color: #212529;">
                                            <strong>22/11/2025</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Layout dividido para escritorio -->
                            <div class="split-layout">
                                <div class="split-layout-left">
                                </div>
                                <div class="split-layout-right">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Pestaña de Expedientes -->
                <div aria-labelledby="expedientes-tab" class="tab-pane fade show active" id="expedientes" role="tabpanel">
                    <div class="main-content">
                        <div class="section-description">
                            <strong>Expedientes</strong>
                            <p>Solicitud que cuenta con revisión preliminar de requisitos, con el pago correspondiente y ha sido formalmente admitida por la OPAMSS para su análisis y evaluación.</p>
                        </div>
                        <!-- Filtros mejorados -->
                        <div class="filter-container">
                            <div class="filter-header">
                                <i class="fas fa-search"></i>
                                <span>Buscar Expediente</span>
                                <button aria-controls="searchFormExpedientes" aria-expanded="true" class="filter-toggle-btn" data-bs-target="#searchFormExpedientes" data-bs-toggle="collapse" type="button">
                                    <i class="fas fa-minus"></i>
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <div class="collapse show filter-body" id="searchFormExpedientes">
                                <div class="col-md-12 mb-0">
                                    <div class="form-check custom-checkbox">
                                        <div class="checkbox-container">
                                            <input class="form-check-input" id="esTramitador" type="checkbox" />
                                            <label for="esTramitador" class="form-check-label">B&uacute;squeda por documento identidad (Propietarios)</label>
                                            <div class="info-icon-wrapper">
                                                <svg class="info-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                                                    <path d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                                </svg>

                                                <div class="custom-tooltip">
                                                    <div class="tooltip-content">
                                                        <div class="tooltip-header">
                                                            <svg class="tooltip-icon" viewBox="0 0 24 24" fill="none">
                                                                <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                                            </svg>
                                                            Búsqueda Inteligente
                                                        </div>
                                                        <div class="tooltip-body">
                                                            Esta opci&oacute;n habilita la b&uacute;squeda por coincidencias seg&uacute;n el documento ingresado, as&iacute; facilitando
                                                            la identificaci&oacute;n de cu&aacute;l expediente seleccionar y consultar
                                                        </div>
                                                    </div>
                                                    <div class="tooltip-arrow"></div>
                                                </div>
                                            </div>
                                        </div><label class="form-check-label" for="esTramitador">
                                    </div>
                                </div><div class="row compact-form">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="tipoTramite">Tipo de trámite</label>
                                            <select class="form-select" id="tipoTramite">
                                                <option selected="" value="">Seleccione un tipo de trámite</option>
                                                <option value="CL">Calificación de Lugar</option>
                                                <option value="FALL">Factibilidad y Drenaje de Aguas Lluvias</option>
                                                <option value="LC">Línea de Construcción</option>
                                                <option value="PC">Permiso de Construcción</option>
                                                <option value="PP">Permiso de Parcelación</option>
                                                <option value="PPS">Permiso de Parcelación Simple</option>
                                                <option value="RO">Recepción de Obras</option>
                                                <option value="RVZ">Revisión Vial y Zonificación</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="numExpediente">Número de expediente</label>
                                            <input class="form-control masked-input" id="numExpediente" placeholder="XXXX-XXXX" type="text" />
                                            <div class="form-help-text">Formato: XXXX-XXXX</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="numDocumentoExpediente">Número de documento de identidad</label>
                                            <input class="form-control" id="numDocumentoExpediente" placeholder="Ingrese el número de documento" type="text" />
                                            <div class="form-help-text">DUI, pasaporte, NIT o carnet de residente</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-footer">
                                    <button class="btn btn-outline-secondary" id="limpiarExpediente" type="button">
                                        <i class="fas fa-times me-1"></i>Limpiar
                                    </button>
                                    <button class="btn btn-primary" id="buscarExpediente" type="button">
                                        <i class="fas fa-search me-1"></i>Buscar
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Mensaje de no resultados -->
                        <div class="results-table-container mt-4" id="resultadosMultiples" style="display: none;"><div class="section-title-modern mb-4"><h5 class="m-0"><i class="fas fa-list-ul me-2"></i>Resultados de la búsqueda</h5></div><div class="table-responsive"><table class="table table-hover dt-responsive nowrap w-100 border-0 modern-table" id="tablaResultados"><thead><tr><th>TR&Aacute;MITE</th><th>EXPEDIENTE</th><th>INGRESO</th><th>ESTADO</th><th>PROYECTO</th><th>ACCIÓN</th></tr></thead><tbody id="resultadosTabla"></tbody></table></div></div><div class="no-results" id="noResultsExpedientes">
                            <i class="fas fa-search"></i>
                            <h5>No se encontraron resultados</h5>
                            <p>No se encontró información para los criterios de búsqueda ingresados. Por favor, verifique los datos e intente nuevamente.</p>
                        </div>
                        <!-- Detalles del expediente (inicialmente oculto) -->
                        <div class="details-container" id="detallesExpediente">
                            <div class="d-flex justify-content-end mb-3"><button class="btn btn-outline-primary btn-sm back-button" id="volverAResultados" style="display:none;" type="button"><i class="fas fa-arrow-left me-2"></i>Volver a resultados</button></div>
                            <!-- Resumen de información -->
                            <div class="summary-row">
                                <div class="summary-card">
                                    <div class="summary-icon primary">
                                        <i class="fas fa-folder"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">N&uacute;mero de Expediente</div>
                                        <div id="codigo-expediente" class="summary-value">2025-0243</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon success">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Fecha de Admisi&oacute;n</div>
                                        <div id="fecha-ingreso" class="summary-value">24/06/2025</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon warning">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Días Transcurridos</div>
                                        <div id="dias-habiles" class="summary-value">6 días hábiles</div>
                                    </div>
                                </div>

                                <div class="summary-card">
                                    <div class="summary-icon warning" style="color: #e3342f;">
                                        <!-- Rojo -->
                                        <i class="fas fa-hourglass-half"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Fecha de Consulta</div>
                                        <div id="dia-hoy" class="summary-value">22/11/2025</div>
                                    </div>
                                </div>

                            </div>

                            <!-- Aviso NUEVO para Observaciones de Análisis Técnico -->
                            <div id="zona-observaciones-analisis" class="mb-3"></div>

                            <!-- Aviso NUEVO de complementos de pago pendientes -->
                            <div id="zona-complementos-pago" class="mb-3"></div>

                            <!-- Alerta NUEVA: suspensión de plazo -->
                            <div id="zona-suspension-plazo" class="mb-3"></div>

                            <!-- Aviso NUEVO de limite de prorrogas/memos -->
                            <div id="zona-limite-prorroga"></div>

                            <div class="timeline-wizard">
                                <div class="wizard-track">
                                    <!-- Línea de progreso animada -->
                                    <div class="wizard-progress" style="width: 38%;"></div>
                                </div>
                                <div class="wizard-steps">
                                    <div class="wizard-step done" title="Expediente recibido en sistema">
                                        <div class="wizard-dot"><i class="fas fa-inbox"></i></div>
                                        <div class="wizard-label">Recepción</div>
                                        <div class="wizard-date">20/02/2024</div>
                                    </div>
                                    <div class="wizard-step done" title="Asignado al área técnica correspondiente">
                                        <div class="wizard-dot"><i class="fas fa-user-cog"></i></div>
                                        <div class="wizard-label">Asignado área técnica</div>
                                        <div class="wizard-date">21/02/2024</div>
                                    </div>
                                    <div class="wizard-step done" title="En proceso de análisis técnico">
                                        <div class="wizard-dot"><i class="fas fa-search"></i></div>
                                        <div class="wizard-label">En revisión</div>
                                        <div class="wizard-date">23/02/2024</div>
                                    </div>
                                    <div class="wizard-step active" title="Validación de resultados">
                                        <div class="wizard-dot"><i class="fas fa-check-circle"></i></div>
                                        <div class="wizard-label">Validación</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Elaboración de resolución">
                                        <div class="wizard-dot"><i class="fas fa-file-signature"></i></div>
                                        <div class="wizard-label">Resolución</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Pago de tributo municipal pendiente">
                                        <div class="wizard-dot"><i class="fas fa-money-check-alt"></i></div>
                                        <div class="wizard-label">Pago tributo</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Resolución notificada al usuario">
                                        <div class="wizard-dot"><i class="fas fa-bell"></i></div>
                                        <div class="wizard-label">Notificado</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Expediente finalizado">
                                        <div class="wizard-dot"><i class="fas fa-flag-checkered"></i></div>
                                        <div class="wizard-label">Finalizado</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="wizard-color-guide">
                                <div class="color-item">
                                    <span class="color-dot color-inactivo"></span>
                                    <span class="color-label">Pendiente</span>
                                </div>
                                <div class="color-item">
                                    <span class="color-dot color-proceso"></span>
                                    <span class="color-label">En proceso</span>
                                </div>
                                <div class="color-item">
                                    <span class="color-dot color-finalizado"></span>
                                    <span class="color-label">Finalizado</span>
                                </div>
                            </div>




                            <!-- Layout dividido para escritorio -->
                            <div class="split-layout">
                                <div class="split-layout-left">
                                    <div class="progress-container">
                                        <div class="section-title mb-2">
                                            <i class="fas fa-tasks"></i> Progreso del Expediente
                                        </div>
                                        <div class="progress-container">
                                            <div class="progress">
                                                <div class="progress-bar custom-progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress-info mt-2">
                                                <span><i class="fas fa-calendar-check"></i> Iniciado: 24/06/2025</span>
                                                <span><i class="fas fa-clock"></i> 6 días hábiles</span>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="split-layout-right">
                                    <div class="section-title">
                                    </div>
                                    <!-- Tabs verticales alineados al contenedor -->
                                    <div id="tabs-dinamicos" class="tabs-wrapper"></div>



                                    <div id="timeline-container" class="timeline-container">
                                        <div class="timeline timeline-compact">
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-file-alt me-2" style="color: var(--success-color)"></i>
                                                        Admitido
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Lunes 24 de junio de 2025 - 9:20 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Solicitud con número de expediente asignado
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-user-cog me-2" style="color: var(--success-color)"></i>
                                                        Asignado al Área Técnica
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Martes 25 de junio de 2025 - 11:45 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        El expediente ha sido clasificado según el área que lo analizará
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-clipboard-check me-2" style="color: var(--success-color)"></i>
                                                        Visita técnica
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Miércoles 26 de junio de 2025 - 2:30 pm
                                                    </div>
                                                    <div class="timeline-description">
                                                        En programación, ejecución y sistematización de inspección al inmueble
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-microscope me-2" style="color: var(--success-color)"></i>
                                                        En análisis técnico
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Jueves 27 de junio de 2025 - 10:15 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        En proceso de evaluación
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Sub-estados de análisis técnico -->
                                            <div class="timeline-subitem completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-lock me-2" style="color: var(--medium-gray)"></i>
                                                        Plazo de análisis suspendido
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Viernes 28 de junio de 2025 - 9:00 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Suspensión temporal del análisis por consultas interinstitucionales
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="timeline-subitem completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-unlock me-2" style="color: var(--medium-gray)"></i>
                                                        Plazo de análisis reanudado
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Lunes 1 de julio de 2025 - 10:00 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Análisis reiniciado por respuesta obtenida de la institución consultada
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-pen-fancy me-2" style="color: var(--medium-gray)"></i>
                                                        Preparando respuesta
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        En proceso de elaboración
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-check-double me-2" style="color: var(--medium-gray)"></i>
                                                        En validación
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        En revisión de resultados
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-envelope me-2" style="color: var(--medium-gray)"></i>
                                                        Respuesta notificada
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        Resolución enviada a los canales correspondientes
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Botón WhatsApp flotante -->
<div class="whatsapp-float-container">
    <button class="whatsapp-button fab-wa" onclick="openWhatsApp()" title="Chatear por WhatsApp">
        <span class="whatsapp-tooltip">¡Chatea con nosotros!</span>
        <span class="notification-badge">1</span>
        <i class="fab fa-whatsapp"></i>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </button>
</div>

<footer class="footer mt-auto py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="footer-brand">
                    <img src="https://tramites.opamss.org.sv/Content/images/logo-blanco2.png" alt="OPAMSS Logo" class="footer-logo">
                    <p class="mt-2 mb-0 footer-text">Oficina de Planificación del Área Metropolitana de San Salvador</p>
                </div>
            </div>
            <div class="col-md-4 mb-3 mb-md-0">
                <h5 class="footer-heading">Contacto</h5>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> Torre Quattro / Nivel 11, World Trade Center, 87 Ave. Nte. y Calle El Mirador, San Salvador Centro.</li>
                    <li><i class="fas fa-phone"></i> (503) 2234-0600</li>
                    <li><i class="fas fa-envelope"></i> <a href="javascript:void(0)" class="__cf_email__">tramites@opamss.org.sv</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5 class="footer-heading">Enlaces</h5>
                <ul class="footer-links">
                    <li><a href="https://opamss.org.sv/" target="_blank"><i class="fas fa-external-link-alt"></i> Sitio Web Oficial</a></li>
                    <li><a href="https://tramites.opamss.org.sv/" target="_blank"><i class="fas fa-file-alt"></i> Portal de Trámites</a></li>
                </ul>
            </div>
        </div>
        <hr class="footer-divider">
        <div class="row footer-bottom">
            <div class="col-md-6 mb-2 mb-md-0">
                <p class="copyright mb-0">&copy; 2025 OPAMSS. Todos los derechos reservados.</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="social-links">
                    <a href="https://www.facebook.com/COAMSS.OPAMSS/" class="social-link" target="_blank"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://x.com/coamss_opamss?lang=es" class="social-link" target="_blank"><i class="fab fa-twitter"></i></a>
                    <a href="https://www.instagram.com/coamssopamss/?hl=es" class="social-link" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/channel/UCH73Ct1R0bnbi__fm4Glvzw" class="social-link" target="_blank"><i class="fab fa-youtube"></i></a>
                    <a href="https://sv.linkedin.com/in/coamss-opamss" class="social-link" target="_blank"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/site.js?v=pUNKw-m1t9RX34rW4myunTteDp2m__SBpaSodIbEDK8"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    
</body>
</html>